How to limit the number of dropzone js files uploaded

Question

Depending on the use case  how do I  constrain the number of files that dropzone js will allow   For example  I might need to only allow 1  2  or 4 files uploaded   It s not uploadMultiple  Unfortunately  uploadMultiple only applies to the number of files handled per request

User · Answer

You can limit the number of files uploaded by changing in dropezone js  Dropzone prototype defaultOptions           maxFiles  10

User · Answer

Set maxFiles Count  maxFiles  1 In maxfilesexceeded event  clear all files and add a new file    event  Called for each file that has been rejected because the number of files exceeds the maxFiles limit   var myDropzone   new Dropzone  quot div yourDropzoneID quot     url   quot  file post quot    uploadMultiple  false  maxFiles  1      myDropzone on  quot maxfilesexceeded quot   function  file        myDropzone removeAllFiles        myDropzone addFile file

User · Answer

Alternative solution that worked really well for me   init  function         this on  addedfile   function event            while  this files length  gt  this options maxFiles                this removeFile this files 0

User · Answer

You can also add in callbacks - here I m using Dropzone for Angular   dzCallbacks          addedfile    function file            scope btSend   false           scope form logoFile   file              success    function file  xhr            scope btSend   true          console log file  xhr               maxfilesexceeded   function file              timeout function                  file  removeLink click               2000

User · Answer

I achieved this a slightly different way   I just remove the old dropped file any time a new file is added   It acts as overwriting the file which was the user experience I was going for here   Dropzone options myAwesomeDropzone       accept  function file  done        console log  uploaded        done           init  function         this on  addedfile   function           if  this files 1   null           this removeFile this files 0

User · Answer

it looks like maxFiles is the parameter you are looking for   https   github com enyo dropzone blob master src dropzone coffee L667

User · Answer

Why do not you just use CSS to disable the click event  When max files is reached  Dropzone will automatically add a class of dz-max-files-reached   Use css to disable click on dropzone     dz-max-files-reached             pointer-events  none            cursor  default      Credit  this answer

User · Answer

I d like to point out  maybe this just happens to me  HOWEVER  when I use this removeAllFiles   in dropzone  it fires the event COMPLETE and this blows  what I did was check if the fileData was empty or not so I could actually submit the form

User · Answer

Dropzone options dpzSingleFile         paramName   file      The name that will be used to transfer the file     maxFiles  1      init  function             this on  maxfilesexceeded   function file                this removeAllFiles                this addFile file

User · Answer

Nowell pointed it out that this has been addressed as of August 6th  2013  A working example using this form might be    lt form class  dropzone  id  my-awesome-dropzone  gt  lt  form gt    You could use this JavaScript   Dropzone options myAwesomeDropzone       maxFiles  1    accept  function file  done        console log  uploaded        done           init  function         this on  maxfilesexceeded   function file           alert  No more files please                      The dropzone element even gets a special style  so you can do things like    lt style gt     dz-max-files-reached  background-color  red    lt  style gt

User · Answer

maxFiles  1 does the job but if you also want to remove the additional files you can use this sample code taken from the Wiki page   How can I limit the number of files      You re in luck  Starting with 3 7 0 Dropzone supports the maxFiles   option  Simply set it to the desired quantity and you re good to go    If you don t want the rejected files to be viewed  simply register for   the maxfilesexceeded event  and remove the file immediately    myDropzone on  maxfilesexceeded   function file        this removeFile file

User · Answer

The problem with the solutions provided is that you can only upload 1 file ever  In my case I needed to upload only 1 file at a time  on click or on drop    This was my solution        Dropzone options myDropzone             maxFiles  2          init  function                 this handleFiles   function files                    var file   i   len   results                   results                       for   i   0   len   files length   i  lt   len   i                          file   files  i                        results push this addFile file                           Make sure we don t handle more files than requested                     if  this options maxFiles    null  amp  amp  this options maxFiles  gt  0  amp  amp   i  gt    this options maxFiles - 1                             break                                                          return  results                             this  addFilesFromItems   function items                    var entry  item   i   len   results                   results                       for   i   0   len   items length   i  lt   len   i                          item   items  i                       if   item webkitGetAsEntry    null   amp  amp   entry   item webkitGetAsEntry                               if  entry isFile                                 results push this addFile item getAsFile                                else if  entry isDirectory                                 results push this  addFilesFromDirectory entry  entry name                              else                                results push void 0                                                   else if  item getAsFile    null                            if   item kind    null     item kind      file                                  results push this addFile item getAsFile                                else                                results push void 0                                                   else                            results push void 0                                                Make sure we don t handle more files than requested                     if  this options maxFiles    null  amp  amp  this options maxFiles  gt  0  amp  amp   i  gt    this options maxFiles - 1                             break                                                          return  results                                    Hope this helps

User · Answer

I thought that the most intuitive single file upload process was to replace the previous file upon a new entry         drop-image   dropzone       url    cart upload-engraving true       maxFiles  1      maxfilesexceeded  function file            this removeAllFiles            this addFile file

[file] How to limit the number of dropzone.js files uploaded?

Examples related to file

Examples related to file-upload

Examples related to upload

Examples related to limit

Examples related to dropzone.js