Async File Uploads in MVC 4

Once and a while, I come across a problem that requires some "solving".  It's a different scenario that the typical "I've done this before, lets do it again", where you may make something better, or more efficient, or refactor it in some way.

Async file uploads have always been tricky, there are out of the box controls that work well, but the good ones aren't all free.  Some of them dont work, or only work in specific scenarios, and to be honest, anything requiring the swfUpload component is just a pain inside an ASP.NET application - as it operates completly out of band and process.

Enter: Ajax and Jquery, and a little component / framework called the Jquery-File-Upload by BlueImp (https://github.com/blueimp/jQuery-File-Upload)

It took me a day or two to get the whole thing working as I would expect, while there are some limitations, I decided I could live them them (IE less than version 10 wont support true progress).

Overall, here's the important bits:

  • We needed a good way to drop this control into any page as needed, and have it work
  • It had to work within the MVC framework, without anything crazy like generic handlers
  • It had to be asyncronous in nature and not require a page postback
  • It had to be customizable from an HTML / CSS standpoint so that we can easily fit the look into our application

So, how did we accomplish all this?  Overall, it wasn't to difficult, the hardest part was dealing with the inconsitancies of each browser, and the way it reported progress and other such things

Here it is running in IE:

 

Here it is running in Chrome:  (Note:  In Chrome, Firefox, and Safari you'll get a multiple file selection, in IE 9 and under, you wont.  IE 10 you will)

Source code is available:

DOWNOAD:  MvcTesting.zip - note, I removed the nuget packages from the root of the solution folder (to keep the size down),  please resolve reference issues by installing the appropriate package.

Credits:

ASP.NET MVC 4 w/ Razor View Engine

Twitter Bootstrap

jQuery & jQuery UI

jQuery-File-Upload (Blue Imp)

2 Comments

Comments have been disabled for this content.