How to theme Dropzone

One of the most important features of Dropzone is its architecture that allows to have complete control over theming it.

For example, have a look a this bootstrap theme. As you can see, it does not look at all like the default Dropzone.

The most important thing know about Dropzone, is that all of the userface is exchangeable. Actually, everything you see is just the default configuration of it.

All progress bars, image thumbnails, file size information, etc... are displayed by listening to Dropzone's events, and updating the UI accordingly. The HTML that is used to show a file is stored in previewTemplate. You can completely change this template, but make sure you overwrite all default event listeners as well.

As you know, you can listen to every event with myDropzone.on("addedfile", function(file) { });. But Dropzone also comes with default event listener implementations that can be passed as options directly. If done so, you overwrite the default behaviour.

For example: the default implementation of the thumbnail event listener is to:

1. Remove the dz-file-preview class of the preview element
2. Add the dz-image-preview class
3. Get the <img> element with a data-dz-thumbnail attribute...
4. ...and set the src of the thumbnail image.

Now, if you change your previewTemplate so that it doesn't contain a <img data-dz-thumbnail> element anymore, then this default event listener will fail (since it can't find the element). So you'll have to provide a new one:

new Dropzone("#drop", {
  thumbnail: function(file, dataUrl) {
    /* do something else with the dataUrl */
  }
});

To get started, I recommend looking at the source of default event listeners and see what they actually do. You can safely overwrite them in your configuration since they do absolutely not affect the file upload.