Dropzone

Use this enhanced file picker component instead of the basic file input element to make file upload process easier.

Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.

You have to take note that Dropzone instance is managed by the FilePicker component. Whereas the FilePicker component is not included as a core component. So you have to import it manually when it is actually needed on the page.

Basic Dropzone #

Get started with the basic filepicker with minimal configuration. Take a look at the example below:

Max Files #

Use data attributes to set any dropzone options. Prefixed with data-filepicker-{key}="{value}". The value is JSON-supported. Below is an example of a single file upload using the maxFiles option.

Drop a file here to upload

Accepted Files #

Here is an example of how to accept image jpg/png only.

Drop a jpg/png image here to upload

Removable #

Add a link to every file preview to remove or cancel (if already uploading) the file. The data-filepicker-dict-cancel-upload, data-filepicker-dict-cancel-upload-confirmation and data-filepicker-dict-remove-file options are used for the wording.

Initializing #

You can use one of these two methods to initialize the Dropzone instance.

Via Data Attributes #

The easiest way to initialize the Dropzone instance is by using data attributes. We already gave examples of how to use this method above. If you haven't checked it out yet, just scroll back to the top.

Just set the data-filepicker attribute to any element, set the url option through form[action] or the data-filepicker-url attribute, and don't forget to add dropzone class. If you want to set more options, you can set more data-filepicker-{key}="{value}" to that element. The value can be a standard string or JSON formatted.

Via Javascript #

Initialize the Dropzone instance by calling the FilePicker.createInstance(element, settings) function.

Function	Description
`FilePicker.createInstance(element, options)`	Create a Dropzone instance.
`FilePicker.getInstance(element, options)`	If any, get the Dropzone instance.
`FilePicker.getOrCreateInstance(element, options)`	Get the Dropzone instance if there is one. Create it if necessary.
`FilePicker.destroyInstance(element)`	To destroy a Dropzone instance. Usually called before removing the element.
`FilePicker.dataApi(wrapperElement)`	Execute the Data API within the specified `wrapperElement`.

API #

If you need more than that, please check out their official docs directly. There are more examples that you can try out as well.

Messages

Notifications