Dropzone.js

Configuration Demo


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.


Add files...

Advantages

  • No jQuery dependency
  • Extremely easy configuration so it looks exactly how you want it to look
  • Fast fast fast.



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: