JQuery & HTML5 Drag n Drop Uploads with ASP.NET MVC3

I recently came across this incredibly funky jQuery library to do Drag ‘n’ Drop uploads using the new HTML5 File API.  After reading about it and playing with the demo I just had to try it out, so I’ve knocked up a sample ASP.NET MVC 3 app that handles the uploads.  It currently works in Chrome and Firefox.

You can grab the code for this demo from GitHub.

There’s not a lot to say that the demo doesn’t show, it’s all terribly easy to set up.  A minimal example requires a droppable area, e.g. a <div> tag to be on the page with the following JavaScript.

$("#dropbox").html5Uploader({
    name: "myfile",
    postUrl: "/Home/Upload"
}

The options specify the name of the form field when it’s POSTed and the URL of the script to POST to. From there you can extend the funkyness by listening for the wide range of events that get bubbled up.  These let you show previews of the files you’re uploading, show progress bars, let people know when the upload is complete or provide helpful errors when things go wrong.

All in all, it’s super sexy and really easy to get started with!