CODEWITHSUNDEEP
phpjqueryfile-uploaduploaddropzone.js
user782104
user782104

Reputation: 13545

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

Currently I use dropzone to handle the file upload in Jquery. So far it works fine.

The only problem is that, in the configuration there is a maxFileSize options , it limit the "single" file size.

And as the server (php.ini) also has a "total" file size limitation, I wonder how to limit that in the dropzone.js?

Thanks a lot.

http://www.dropzonejs.com/#configuration-options

Upvotes: 4

Views: 18136

Answers (4)

Andrea Falco
Andrea Falco

Reputation: 59

I found this workaround defining the accept function:

var totalsize = 0.0;
$("div#dropzone").dropzone({ 
    accept: function(file, done) {
        if (totalsize >= MAX_TOTAL_SIZE) {
            file.status = Dropzone.CANCELED;
            this._errorProcessing([file],  "Max limit reached", null);
        }else { 
            done();
        }
    }
    init: function() {
        this.on("addedfile", function(file) { 
            totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));
        });
        this.on("removedfile", function(file) {
            if(file.upload.progress != 0){
                totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
            }
        });
        this.on("error", function(file) {
            totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
        });
    }
});

where MAX_TOTAL_SIZE is the max value that dropzone shall not exceed.

Upvotes: 4

Mabrouki Fakhri
Mabrouki Fakhri

Reputation: 229

It's a little bit late but maybe someone else need this. Well, you need to create a new variable "totalSize" in the init function. Add an event listenner to the fileAdd to increase size and another one to substruct, then a little controle before you send the request to show an error, i'm bad with english so here is an example :

...
init: function() {
   var totalsize = 0.0;
 ...
    this.on("addedfile", function(file) {
 ... 
// increment total size when we add a file (in Mb)
    totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));

//substruct the size of the removed file
      removeButton.addEventListener("click", function(e) {
      ...
         _this.removeFile(file);
      totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
     ...                      
      });
  ...             
  });
//and an event for the submission to controle before submit don't forget to prevent default
this.on("sendingmultiple", function(data, xhr, formData) {

if (totalsize <= 20) {
      //do the request
       }else { // else show the error
        $('#error').show();
       $('#error').text('Oooops ! total files size must be less then 20Mb');

                        }
                  });
}

Maybe it's no so clear, so there is a full code example, in my code i'm adding a styled remove button so don't forget to delete it:

init: function() {
                    var totalsize = 0.0;
                    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

                      // for Dropzone to process the queue (instead of default form behavior):
                      document.getElementById("submit-all").addEventListener("click", function(e) {
                          // Make sure that the form isn't actually being sent.
                          e.preventDefault();
                          e.stopPropagation();
                          dzClosure.processQueue();
                      });
                    this.on("addedfile", function(file) {
                        // Create the remove button
                        var removeButton = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm btn-block'>Remove</a>");

                        // Capture the Dropzone instance as closure.
                        var _this = this;

                        // Listen to the click event
                        removeButton.addEventListener("click", function(e) {
                          // Make sure the button click doesn't submit the form:
                          e.preventDefault();
                          e.stopPropagation();

                          // Remove the file preview.
                          _this.removeFile(file);
                          totalsize -= parseFloat((file.size / (1024*1024)).toFixed(2));
                          // If you want to the delete the file on the server as well,
                          // you can do the AJAX request here.
                        });

                        // Add the button to the file preview element.
                        file.previewElement.appendChild(removeButton);
                        //increment
                        totalsize += parseFloat((file.size / (1024*1024)).toFixed(2));


                    });

                                    //send all the form data along with the files:
                      this.on("sendingmultiple", function(data, xhr, formData) {

                          if (totalsize <= 20) {
                            console.log(totalsize);
        //u can append formData here too
                            formData.append("something", jQuery("#something").val());
                          }else {
                              $('#error').show();
                              $('#error').text('Oooops ! total files size must be less then 20Mb');

                            }
                      });
                }

Upvotes: 1

Adrian Gheorghe
Adrian Gheorghe

Reputation: 677

Try to modify your php.ini (that php.ini from apache , not from php) , because in dropzoneJS , i think is enough 500mb to store one time

search there the post_max_size ..let's say put it 100M , and

upload_max_filesize = 50M ... or how do you prefer !

Good luck with it , and I hope it's helpfully !

Upvotes: -1

Skinner
Skinner

Reputation: 1503

I only see maxfilesize, paralleluploads and maxfiles

I think you may need to keep track of the file sizes as they're added, maybe using 

this.on("addedfile", function(file) { // perform task // });

... tally the file sizes and disable the submit button if the total file size is exceeded. 

document.getElementById('dropsubmit').disabled = false;

There are "addedFile" and "removedFile" events you could use to alter a variable tracking the file size as files are added and removed. depending on the cumulative size, set the submit button to true or false.

Upvotes: 5

Related Questions