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 maxfilesexceededcallback and maxFilesoption 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 maxfilesexceededwill 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.

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.

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 dropzoneand previewsContainerelements to show preview thumbnails. Also set clickableto match the button's id for button to work as file selector.

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.5 MB as is in this example. User can also define maxThumbnailFilesizein MB. When the uploaded file exceeds this limit, the thumbnail will not be generated.

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 clickablethis option will be used as acceptparameter on the hidden file input as well.

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, dictCancelUploadConfirmationand dictRemoveFile options are used for the wording.

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 removeAllFilesmethod to remove all the files from the dropzone.

• If you do not want the default message at all (»Drop files to upload (or click)«), you can put an element inside your dropzone element with the class dz-messageand dropzone will not create the message for you.
• Dropzone will submit any hidden fields you have in your dropzone form. So this is an easy way to submit additional data. You can also use the paramsoption.
• Dropzone adds data to the fileobject you can use when events fire. You can access file.widthand file.heightif it’s an image, as well as file.uploadwhich is an object containing: progress(0-100), total(the total bytes) and bytesSent.
• If you want to add additional data to the file upload that has to be specific for each file, you can register for the sendingevent:

  myDropzone.on("sending", function(file, xhr, formData) {                                            // Will send the filesize along with the file as POST data.                                            formData.append("filesize", file.size);                                        });

• To access the preview html of a file, you can access file.previewElement. For example:

  myDropzone.on("addedfile", function(file) {                                            file.previewElement.addEventListener("click", function() {                                                myDropzone.removeFile(file);                                            });                                        });

• If you want the whole body to be a Dropzone and display the files somewhere else you can simply instantiate a Dropzone object for the body, and define the previewsContaineroption. The previewsContainershould have the dropzone-previewsor dropzoneclass to properly display the file previews.

  new Dropzone(document.body, {                                            previewsContainer: ".dropzone-previews",                                            // You probably don't want the whole body                                            // to be clickable to select files                                            clickable: false                                        });

• Look at the herefor more examples.