Jquery AJAX File Upload with form data

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?
Al4ddin2Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
ambienceConnect With a Mentor Commented:
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
 
apeterConnect With a Mentor Commented:
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
 
Al4ddin2Author Commented:
It's still coming through as null?
0
 
Al4ddin2Author Commented:
Hi. Thanks I have found the Ajax form plugin which seems to do exactly that.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.