Dropzone.js

Configuration Demo

• This is not
• jQuery File Upload
• This is Dropzone

This is not jQuery File upload.
It is a demonstration of the powerful configuration possibilities of Dropzone.js. You can make Dropzone.js look exactly how you want it to look and it's very easy to do so.

How it's done

For a complete understanding of how Dropzone.js works please visit the website www.dropzonejs.com.

Basically Dropzone just does all the heavy lifting for you, and exposes a very high level API that you can use to build your user interface.
The main feature of Dropzone is its events that you can listen to, so you can react to every change.

This is the HTML that is used as template for every file dropped:

As you can see, it's basically the HTML copied form jQuery-file-upload. The most important difference, is that there are data-dz-* markers in the markup, so that Dropzone can update the elements automatically.

The JavaScript should be self explanatory: