Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery AJAX File Upload with form data

Posted on 2014-12-20
4
Medium Priority
?
593 Views
Last Modified: 2014-12-23
I am using Razor, c# and Jquery to attempt to upload a file - along with the form data.

Currently I have this:
@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadForm" }))
<input id="fileupload" type="file" name="attachmentFile" required />
<input type="hidden" name="Id" value="@Model.Id" />
<ul>
                @foreach (var location in Model.testLocation)
                {
                    <li><label><input type="radio" name="testLocation" required value="@location.Value" @(location.Selected ? "checked='checked'" : "") />@location.Text</label></li>
                }
            </ul>
<button type="submit" class="btn">Upload</button>

Open in new window


No I am trying to use this AJAX to upload the file asynchronously.

$("form#uploadForm").submit(function () {
        var testLocation = $("input:radio[name='testLocation']:checked").val();
        $.ajax({
            url: "@Html.Raw(Url.Action("MyAction", "MyController", new { Id = Model.Id, testLocation = "abc" }))".replace("abc", testLocation),
            type: 'POST',
            async: false,
            success: function (data) {
                $('#errors').text(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

        return false;
    });

Open in new window



And my controller looks like this:

[HttpPost]
	    public ActionResult MyAction(int Id, HttpPostedFileBase attachmentFile, TestLocation testLocation)
	    {
            //do some stuff and return errors.
	    }

Open in new window


However, my attachmentFile is always null?
0
Comment
Question by:Al4ddin2
  • 2
4 Comments
 
LVL 25

Assisted Solution

by:apeter
apeter earned 1000 total points
ID: 40511872
Since attachmentFile is not in url so it doesn't map to it.

To get your attachment use Request object. Inside your action use below code.

HttpPostedFileBase myFile = Request.Files["fileupload"];
0
 

Author Comment

by:Al4ddin2
ID: 40512552
It's still coming through as null?
0
 
LVL 22

Accepted Solution

by:
ambience earned 1000 total points
ID: 40513356
You are not submitting the form with $.ajax therefore the file is not even uploaded to the server. There is no other HTML only way to upload a file from the client side except through submitting the form. In HTML5, however, the new XMLHTppRequest2 object has some new API that allows async/ajax upload of files (http://www.sitepoint.com/html5-ajax-file-upload/)

That said, since you are using jQuery you should be able to find a plugin for ajax upload that gracefully regresses and uses the best available method for uploading a file async.
0
 

Author Comment

by:Al4ddin2
ID: 40514462
Hi. Thanks I have found the Ajax form plugin which seems to do exactly that.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Suggested Courses

926 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question