Layout

The HTML that is generated for each file by dropzone is defined with the option previewTemplate which defaults to this:
1
<div class="dz-preview dz-file-preview">
2
  <div class="dz-details">
3
    <div class="dz-filename"><span data-dz-name></span></div>
4
    <div class="dz-size" data-dz-size></div>
5
    <img data-dz-thumbnail />
6
  </div>
7
  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
8
  <div class="dz-success-mark"><span>✔</span></div>
9
  <div class="dz-error-mark"><span>✘</span></div>
10
  <div class="dz-error-message"><span data-dz-errormessage></span></div>
11
</div>
Copied!
The container (dz-preview) gets the dz-processing class when the file gets processed, dz-success when the file got uploaded and dz-error in case the file couldn’t be uploaded. In the latter case, data-dz-errormessage will contain the text returned by the server.
To overwrite the default template, use the previewTemplate config.
You can access the HTML of the file preview in any of the events with file.previewElement.
If you decide to rewrite the previewTemplate from scratch, you should put elements with the data-dz-* attributes inside:
data-dz-name
data-dz-size
data-dz-thumbnail (This has to be an <img /> element and the alt and src attributes will be changed by Dropzone)
data-dz-uploadprogress (Dropzone will change the style.width property from 0% to 100% whenever there’s a uploadprogress event)
data-dz-errormessage
The default options for Dropzone will look for those element and update the content for it.
If you want some specific link to remove a file (instead of the built in addRemoveLinks config), you can simply insert elements in the template with the data-dz-remove attribute. Example:
1
<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />
Copied!
You are not forced to use those conventions though. If you override all the default event listeners you can completely rebuild your layout from scratch.
See the installation section on how to add the stylesheet if you want your Dropzone to look like the example dropzone.
See the Theming section, for a more in depth look at how to completely change Dropzone’s UI.
I created an example where I made Dropzone look and feel exactly the way jQuery File Uploader does with a few lines of configuration code. Check it out!​

Configuration Options

Methods

Last modified 9mo ago

Copy link