Example of a multiple file uploader based on Dropzone.js library. Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX. By default Dropzone is a multiple file uploader, so this example is a basic setup. Uploading process runs automatically and image thumbnail previews are shown right after file selection.

Multiple file upload example:

Example of a single file uploader based on Dropzone.js library. By default, dropzone is a multiple file uploader and does not have specific option allowing us to switch to single file uploading mode, but this functionality can be achieved by adding more options to the plugin settings, such as addedfile callback and maxFiles option set to 1. Now only 1 file can be selected and it will be replaced with another one instead of adding it to the preview.

Single file upload example:

Example of dropzone file uploader with specified file formats. The default implementation of accept checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: image/*, application/pdf, .psd. If the Dropzone is clickable, this option will be used as accept parameter on the hidden file input as well. Thsi example accepts images only with maximum size of 1Mb.

File formats example:

Example of dropzone file uploader with remove thumbnail option applied to every thumbnail in the preview by setting addRemoveLinks option to true. This will add a link to every file preview to remove or cancel (if already uploading) the file. The dictCancelUpload, dictCancelUploadConfirmation and dictRemoveFile options are used for the wording.

Removable thumbnails example:

Example of dropzone uploader with different limits: maxFilesize - maximum size of files allowed, in Mb; maxFiles - if not null defines how many files this Dropzone handles, if it exceeds, the event maxfilesexceeded will be called. The dropzone element gets the class dz-max-files-reached accordingly so you can provided visual feedback; maxThumbnailFilesize - in MB. When the filename exceeds this limit, the thumbnail will not be generated.

File limits example: