How to upload a file directly after the user chooses it using jQuery?

Question

Hi Im having some issues getting a file attaced to a form to submit on jquery .post().

What i want to do is, user choose a file / the form submit using jquery .post(). I got it working fine if i just do a .submit() on the whole form, but i dont want to use it because of other content on the site. here is the code i use now. what this does is use a button as file input and i do the submit on the choose function right away.

$('.upload').file().choose(function (e, input) {                
            input.attr('name', 'firstPicture');
            input.hide();

            $(input).appendTo('#myForm');

            $('#hiddenDiv').show();

            $.post("/Home/UploadSingelFile", $("#myForm").serialize());
            return false;
        });

my action is correct public ActionResult UploadSingelFile(HttpPostedFileBase firstPicture)

what happends when i do like above is that the firstPicture input is null, but like i said if i do the submit its ok.

if this is not possible do im thinking of doing a .submit() but then i need to return a partialview and how would i go about to update that partialview into a div on the return? just like microsofts ajax.form got a updatetarget (i dont want to use their ajax form)

Answer 1

When sending an AJAX request using jQuery you are simply sending a application/x-www-form-urlencoded request to the server whereas in order to upload a file you need to use a multipart/form-data request.

There are some plugins such as jquery form which emulate this functionality by using a hidden iframe. So basically you will write the following to ajaxify the form containing file inputs:

$(function() {
    $('#myForm').ajaxForm(function(result) {
        // do something with the results when the form is submitted
    });
});

and then when you need to submit the form:

$('#myForm').ajaxSubmit();

or simply when the user presses the submit button.

There are also other plugins such as Uploadify and Plupload which would allow yoiu to achieve the same (Uploadify for example uses Flash, while Plupload detects what the client supports: Flash, Silverlight and if not it may fallback to hidden iframes to simulate the file upload).

But you may simply forget about uploading files with $.post.

---

UPDATE:

As @Can Gencer points out in the comments section there's also the Ajax upload plugin which could be used.

Answer 2

To complement Darin's answer, I've done this before using the Ajax upload script before and it worked quite well, and I think it's the most lightweight solution of the ones we tried at the time. It works across all browsers and does not need any flash or silverlight.

All you need to do is create a div as such:

<div id="file-uploader"></div>

and initialize the uploader like this:

var uploader = new qq.FileUploader({
    // pass the dom node (ex. $(selector)[0] for jQuery users)
    element: document.getElementById('file-uploader'),
    // path to server-side upload script
    action: '/Home/UploadSingelFile'
});

This should give you the HttpPostedFile parameter that you need in your action method. To update the view afterwards you can use different callbacks such as :

onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){},
onComplete: function(id, fileName, responseJSON){},
onCancel: function(id, fileName){},

Update:

To get the uploaded file on the ASP.NET MVC side, you need to do some more work. See the answer to this question: MVC3 Valums Ajax File Upload. (credit to Darin)