MVC 4 Ajax Asynchronous File Upload Always Passing Null Value To Controller

Question

I'm having a problem when trying to upload file asynchronously from ajax to my controller. I have 3 variables to pass (PictureId, PictureName, and PictureFile). The problem lies on my "PictureFile" variable which should be holding the uploaded file itself but instead it always pass null value to the controller.

Here is my view model

public class PictureUpload
{
    public int PictureId { get; set; }
    public string PictureName { get; set; }
    public HttpPostedFileBase PictureFile { get; set; }
}

Here is my controller

public JsonResult EditPicture(PictureUpload picture)
{
    //do something here
}

Here is my form

<div class="thumbnail" id="uploadForm">
    <form name="uploadForm" enctype="multipart/form-data">
        <input type="text" name="fileId" hidden="hidden" />
        <input type="file" name="file" style="max-width: 100%" />
        <input type="button" name="cancel" value="cancel" />
        <span>
            <input type="button" name="upload" value="upload" />
        </span>
    </form>
</div>

Here is my script

$("input[name=upload]").click(function () {
    var $pictureId = $("input[name=fileId]").val();
    var $pictureFile = $("input[name=file]").get(0).files[0];

    $.ajax({
        type: 'POST',
        url: '@Url.Action("EditPicture", "Restaurant")',
        contentType: "application/json",
        dataType: 'json',
        data: JSON.stringify({ PictureId: $pictureId, PictureName: $pictureFile.name, PictureFile: $pictureFile }),
    });

In my controller parameter. "PictureId" and "PictureName" holds the correct value, but "PictureFile" is always null. So it means something is going just not right when the system passes the parameter from ajax to controller. Somehow the system treats "file" type differently from others. Could you help me so the file get passed successfully to the controller and tell me what is wrong with this approach?

Check various answers here http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Nitin Varpe, Jun 18 '15 at 06:34
You need to use `FormData` to upload file using ajax. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Jun 18 '15 at 06:34
As mentioned by Stephen, you will need FormData, but it will not work in IE8/9 — Chaitanya Gadkari, Jun 18 '15 at 07:17

score 3 · Accepted Answer · answered Jun 18 '15 at 07:41

As mentioned rightly in the comments use FormData. Below is a code snippet :

var fd = new FormData();
fd.append('file', fileObject);
fd.append('PictureId', pictureId);
fd.append('PictureName', pictureName);

    $.ajax({
        url: '/Restaurant/EditPicture',
        async: true,
        type: 'POST',
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {                  
        }
    });

score -2 · Answer 2 · answered Jun 18 '15 at 07:06

-2

You cannot upload files with AJAX. One way to achieve this is to use a hidden iframe which will simulate an AJAX call and perform the actual file upload or use Flash.

answered Jun 18 '15 at 07:06

Sujit Patil

183
4

Suggest you read the links in the comments and Aashish's answer – Jun 19 '15 at 01:43

MVC 4 Ajax Asynchronous File Upload Always Passing Null Value To Controller

2 Answers2