Dropzone.js
Configuration Demo
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.
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 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: