Single File Upload

This example uploads a single file using 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 maxfilesexceeded callback and maxFiles option set to 1. maxFiles: 1 is used to tell dropzone that there should be only one file. When there is more then 1 file the function maxfilesexceeded will be called, with the exceeding file in the first parameter. Now only 1 file can be selected and it will be replaced with another one instead of adding it to the preview.

Drop Files Here To Upload

Multiple Files Upload

This example uploads a multiple files using dropzone js library. 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.

Drop Files Here To Upload

Use Button To Select Files

This example uploads a multiple files using dropzone js library. Using this method, user gets an option to select the files using a button instead dropping all the files after selected from the folders. You have to define dropzone and previewsContainer elements to show preview thumbnails. Also set clickable to match the button's id for button to work as file selector.

Drop Files Here To Upload

Limit File Size & No. Of Files

In many case user must be limited to upload certain no. of files. You can always set the maxFilesoption to limit no. of upload files. maxfilesexceededevent will be called if uploads exceeds the limit. Also,if you want to limit the file size of uploads then set the maxFilesizeoption. Define the maximum file size to be uploded in MBs like 0.5MB as is in this example. User can also define maxThumbnailFilesizein MB. When the uploaded file exceeds this limit,the thumbnail will not be generated.

Drop Files Here To Upload

Accepted files

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