Dropzone.js

Configuration Demo

• Back to www.dropzonejs.com
• Bootstrap theme

This is a bootstrap theme of Dropzone.js with a completely different user experience.
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 see the tutorial for Dropzone theming and visit the website www.dropzonejs.com to see the full documentation.

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 just basic bootstrap HTML that defines how a file should look like. The most important aspect, is that there are data-dz-* markers in the markup, so that Dropzone can update the elements automatically.

The JavaScript should be self explanatory: