HTML5 Upload

This is actually a modified version of what is used in Wildfire CMS v6.pretty, from around 2011.

In this example I'm sending the data to this page, so it will always trigger 100% and not show the file upload progress bar.

Drag a file into this box

Uploaded files are shown below

Not just the file

In the version of this used in our CMS we also send along tags as part of the xhr request; but you can send pretty much any extra information you want.

All you need to do is add it to the request header before you do the send, so something like this:

xhr.setRequestHeader("X-File-Categories", "Photos");

For the curious

If you are interested, here are the files used for this:

Javascript CSS