How to limit the max "total" file size in dropzone.js?

@jerad 

You can limit the total file size in Dropzone.js by using the maxFilesize option along with the maxfiles option.

Here is an example of how you can set a max total file size limit in Dropzone.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

Dropzone.options.myDropzone = {
  maxFilesize: 5, // set the maximum file size to 5 MB
  maxFiles: 3, // set the maximum number of files to be uploaded

  // Callback function to validate the total file size before adding a new file
  accept: function(file, done) {
    var totalSize = 0;
    this.files.forEach(function(item) {
      totalSize += item.size;
    });
    totalSize += file.size;
    
    if (totalSize <= (5 * 1024 * 1024)) {
      done();
    } else {
      done("Total file size exceeds the limit of 5 MB.");
    }
  }
};

In this example, we have set the maxFilesize option to 5, which limits each individual file size to 5 MB. We have also set the maxFiles option to 3, which limits the total number of files to be uploaded to 3.

Additionally, we have used the accept callback function to calculate the total file size before adding a new file. If the total size of all files exceeds the limit of 5 MB, the file will not be added and an error message will be shown.