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?

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?

• javascript
• jquery
• ajax
• asp-mvc

• Could it be data: $(this).serialize(), instead of data: { 'file': $(this).serialize() },. – R Day Commented Oct 5, 2015 at 16:27
• Also try Fiddler to intercept requests and see what's actually being sent to the server. – R Day Commented Oct 5, 2015 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 Commented Oct 5, 2015 at 16:37
• You need to use FormData when uploading files using ajax - refer this answer – user3559349 Commented Oct 5, 2015 at 21:05
• Edit your question with what you have tried - too hard to read in ments.And look again at the link - in particular the ajax options you need to set. – user3559349 Commented Oct 5, 2015 at 21:38

1 Answer 1

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