Single File Upload
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
maxfilesexceeded
callback and maxFiles
option set to 1.
maxFiles: 1
is used to tell dropzone that there should be only one file.
Multiple Files Upload
By default, dropzone is a multiple file uploader. User can either click on the dropzone area and select multiple files or just drop all selected files in the dropzone area. This example is the most basic setup for dropzone.
Use Button To Select Files
Using this method, user gets an option to select the files using a button instead dropping all the files
after selected from the folders. Set clickable
to match the button's id for button to work as
file selector.
Limit File Size & No. Of Files
In many case user must be limited to upload certain no. of files. You can always set the
maxFiles
option to limit no. of upload files. maxfilesexceeded
event will be
called if uploads exceeds the limit. Also, if you want to limit the file size of uploads then set the
maxFilesize
option. Define the maximum file size to be uploded in MBs like 0.5
MB
as is in this example. User can also define maxThumbnailFilesize
in MB. When the uploaded file
exceeds this limit, the thumbnail will not be generated.
Accepted files
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.
Remove Thumbnail
This example allows user to remove any file out of all uploaded files. 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.
Remove All Thumbnails
This example allows user to create a button that will remove all files from a dropzone. Hear for the
button's click event and then call removeAllFiles
method to remove all the files from the
dropzone.