HttpPostedFileBase is null when using AJAX in ASP MVC 5

Question

I am using JQuery.AJAX to upload files to the server in ASP.NET MVC 5. The code of my view is:

<input type="file" size="45" name="file" id="file">

The Javascript is:

<script>
$('#file').on("change", function () {
    var formdata = new FormData($('form').get(0));
    CallService(formdata);
});
function CallService(file) {
    $.ajax({
        url: '@Url.Action("Index", "Home")',
        type: 'POST',
        data: file,
        cache: false,
        success: function (color) {
            ;
        },
        error: function () {
            alert('Error occured');
        }
    }); 
}

And finally the code of the HomeController.cs:

        public ActionResult Index (HttpPostedFileBase file)
    {
       ...

    }

But everytime the Index action is called, the HttpPostedFileBase Object is empty. I have read all threads about this issue in SO, but could not find an answer. I have entered the right name and it fits with the parameter name in the controller. What is wrong with the code, so that the object is always empty?

Could it be `data: $(this).serialize(),` instead of `data: { 'file': $(this).serialize() },`. — R Day, Oct 05 '15 at 16:27
Also try [Fiddler](http://www.telerik.com/fiddler) to intercept requests and see what's actually being sent to the server. — R Day, Oct 05 '15 at 16:29
@RDay Modifying the data hasn't changed anything and it is still null. The result of Fiddler: Request Count: 1 Bytes Sent: 382 (headers:382; body:0) Bytes Received: 0 (headers:0; body:0) RESPONSE BYTES (by Content-Type) -------------- ~headers~: 0 — Code Pope, Oct 05 '15 at 16:37
You need to use `FormData` when uploading files 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) — , Oct 05 '15 at 21:05
Edit your question with what you have tried - too hard to read in comments.And look again at the link - in particular the ajax options you need to set. — , Oct 05 '15 at 21:38
You still have not included `processData: false,` and `contentType: false,` — , Oct 05 '15 at 22:21
@StephenMuecke I have done that now, but it is still null. But I have found another article [here](https://cmatskas.com/upload-files-in-asp-net-mvc-with-javascript-and-c/) and have implemented it and it works. I don't know how to modify my code that it works, but this article is definitely a solution for this problem — Code Pope, Oct 05 '15 at 22:35
That link is essentially doing just what the link I gave you does except that its a long hand way of adding the files to `FormData`. Do you actually have a `
` element containing your ``? — , Oct 05 '15 at 22:42
@StephenMuecke, yes, that was exactly the lack in my code. I have inserted it and now it is working. Thanks a lot — Code Pope, Oct 05 '15 at 22:54

score 3 · Accepted Answer · edited Dec 18 '18 at 19:25

So the right code for this problem: View:

<form>
    <input type="file" size="45" name="file" id="file">
</form>

The Javascript:

<script>
    $('#file').on("change", function () {
        var formdata = new FormData($('form').get(0));
        CallService(formdata);
    });

    function CallService(file) {
        $.ajax({
            url: '@Url.Action("Index", "Home")',
            type: 'POST',
            data: file,
            cache: false,
            processData: false,
            contentType: false,
            success: function (color) {
                ;
            },
            error: function () {
                alert('Error occured');
            }
        });
    }
</script>

And finally the code of the HomeController.cs:

public ActionResult Index (HttpPostedFileBase file)
{
   ...
}

HttpPostedFileBase is null when using AJAX in ASP MVC 5

1 Answers1