Multiple files
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:
Single file
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:
File formats
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:
Removable thumbnails
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:
File limitations
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:
