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 stackoverflow.com/questions/2320069/jquery-ajax-file-upload — Nitin Varpe
– Nitin Varpe, Commented Jun 18, 2015 at 6:34
You need to use FormData to upload file using ajax. Refer this answer — user3559349
– user3559349, Commented Jun 18, 2015 at 6:34
As mentioned by Stephen, you will need FormData, but it will not work in IE8/9 — Chaitanya Gadkari
– Chaitanya Gadkari, Commented Jun 18, 2015 at 7:17

Aashish Upadhyay · Accepted Answer · 2015-06-18 07:41:54Z

3

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) {                  
        }
    });

answered Jun 18, 2015 at 7:41

Aashish Upadhyay

8801 gold badge8 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sujit Patil · Accepted Answer · 2015-06-18 07:06:36Z

-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, 2015 at 7:06

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related