Uploading images prior to submitting a form in MVC using ajax/jQuery

Question

I'd like to build a form in my MVC app that contains a couple of input fields. Besides that I'd like to have the user asynchronously upload some images by selecting an image on his harddrive, then clicking an upload button. Upon successfull upload, the controller handling the image upload would generate a thumbnail of the image and posting the url to the image back to the page, thus allowing to display the thumbnail of the image on the current page. Once 3 images have been uploaded successfully, the user can actually submit the entire form for processing.

I need a starting point here. Links to code samples would be highly appreciated. Thanks in advance.

Answer 1

I've had great success with a plugin called Uploadify. It is Flash based, but it can upload multiple images asynchronously, is very customizable, and has a ton of callbacks you can hook to achieve what you want.

The only thing is, it was designed to work with PHP, although people have been able to use it successfully with ASP. Nevertheless, I'd still recommend it.

Answer 2

I use http://valums.com/ajax-upload/ in my projects. See my question here for help setting it up:

Need help debugging XHR-based Ajax Image Upload with ASP.NET MVC2

The one thing he doesn't mention in the documentation is that the plugin expects the upload result as JSON, so in the event of a success you would write

return Json(new{success=true})

For returning errors, use {error="error message"}.

If you don't handle it this way - the upload will always appear to fail, even if it worked. See this tutorial for storing your images in a database

http://byatool.com/mvc/asp-net-mvc-upload-image-to-database-and-show-image-dynamically-using-a-view/

As far as a thumbnail goes, I'm not sure on a great way to compress images, but I found this tutorial which you should be able to pull the resize code and place it in your upload action

http://www.aspdotnetcodes.com/Asp.Net_Dynamic_Thumbnail_Creation.aspx

Hope that helps!

Answer 3

I honestly prefer ajaxSubmit plugin for jquery a lot. I used it myself for my website. All you would have to do is

$(#form_element).submit(function {
    $(this).ajaxSubmit();
});

Reference: http://be.twixt.us/jquery/formSubmission.php