Example of a multiplefile uploader based on Dropzone.jslibrary. 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 singlefile uploader based on Dropzone.jslibrary. 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 addedfilecallback and maxFilesoption 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 acceptchecks 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 acceptparameter on the hidden file input as well. Thsi example accepts imagesonly with maximum size of 1Mb.

File formats example:

Example of dropzone file uploader with removethumbnail option applied to every thumbnail in the preview by setting addRemoveLinksoption to true. This will add a link to every file preview to remove or cancel (if already uploading) the file. The dictCancelUpload, dictCancelUploadConfirmationand dictRemoveFileoptions 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 nulldefines how many files this Dropzone handles, if it exceeds, the event maxfilesexceededwill be called. The dropzone element gets the class dz-max-files-reached accordinglyso you can provided visual feedback; maxThumbnailFilesize- in MB. When the filename exceeds this limit, the thumbnail will not be generated.

File limits example: