Catching ajax file in ASP.Net MVC Controller

Question

I want to upload file using ajax to an ASP.Net MVC Controller

My JavaScript code looks like this, basically every time the user changed the input value, it will automatically upload the file to the controller

var formdata = false;
if (window.FormData) {
    formdata = new FormData();
}

$('input[name=default_export_filename]').change(function() {
    var i = 0, len = this.files.length, img, reader, file;

    for ( ; i < len; i++ ) {
        file = this.files[i];
        if (file.type.match(/spreadsheet/) || file.type.match(/ms-excel/)) {
            if ( window.FileReader ) {
                reader = new FileReader();
                reader.onloadend = function (e) { 
                    //showUploadedItem(e.target.result, file.fileName);
                };
                reader.readAsDataURL(file);
            }
            if (formdata) {
                formdata.append("default_export_filename", file);
            }
        }   
    }

    if (formdata) {
        $.ajax({
            url: root + mod + '/uploaddef',
            type: "POST",
            data: formdata,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res);
            }
        });
    }
});

In the controller side, I couldn't catch that file using this

    [HttpPost]
    public ActionResult UploadDEF(HttpPostedFileBase file)
    {
        var jsonData = new
        {
            response = 3
        };

        return Json(jsonData); ;
    }

Or this

    [HttpPost]
    public ActionResult UploadDEF(FormCollectionfile)
    {
        var jsonData = new
        {
            response = 3
        };

        return Json(jsonData); ;
    }

The file argument is always null. But in the firebug, I can see that the browser is posting the file to the server. With what object should I catch the file?

I realize the FormData object is not supported in older browser, but my clients are all using the latest browser. So that is not a problem.

see this post: stackoverflow.com/questions/2428296/…

Rob Angelier
– Rob Angelier

2012-10-09 11:40:27 +00:00
Commented Oct 9, 2012 at 11:40 — Rob Angelier
– Rob Angelier, Commented Oct 9, 2012 at 11:40

strike_noir · Accepted Answer · 2012-10-09 14:10:44Z

3

The problem is solved.

It turns out I don't have to give any parameters to the controller's method. The files are available through Request object.

Thanks all

answered Oct 9, 2012 at 14:10

strike_noir

4,22413 gold badges61 silver badges105 bronze badges

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

Comments

dove · Accepted Answer · 2012-10-09 11:38:15Z

1

You can't use ajax POST to upload a file like this, must be a form submit.

Have a look at component like AjaxUploadify or similar.

answered Oct 9, 2012 at 11:38

dove

20.8k14 gold badges88 silver badges109 bronze badges

3 Comments

strike_noir Over a year ago

it worked with PHP net.tutsplus.com/tutorials/javascript-ajax/…

dove Over a year ago

@strike_noir apparently it is restricted for security reasons. ajax does not allow multipart/form-data enctype. there are several solutions, most using an iframe, that get around this

strike_noir Over a year ago

I found the solution , AJAX file upload in ASP.Net MVC works, thanks anyway

Collectives™ on Stack Overflow

Catching ajax file in ASP.Net MVC Controller

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related