How do I limit the maximum "total" file size in dropzone.js?
I am currently using dropzone to handle file upload in JQuery. This works fine so far.
The only problem is that the configuration has maxFileSize options, it limits the size of "one" file.
And since the server (php.ini) also has a limit on the total file size, I am wondering how to limit this in dropzone.js?
Many thanks.
source to share
I only see maxfilesize
, paralleluploads
andmaxfiles
I think you might need to keep track of file sizes as you add them, perhaps using
this.on("addedfile", function(file) { // perform task // });
... specify the file size and disable the submit button if the total file size is exceeded.
document.getElementById('dropsubmit').disabled = false;
There are "addedFile" and "deletedFile" events that you could use to change the file size variable as files are added and removed. depending on the cumulative size, set the submit button to true or false.
source to share
A bit late, but maybe someone will need it. Well, you need to create a new "totalSize" variable in the init function. Add an event listener to the Add file to increase the size and another one to tweak, then do a little tinkering before submitting the request to show the error, I'm not fluent in English, here's 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 is not that clear, so there is complete code in my code, I am adding a stylish delete button, so be sure to remove 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');
}
});
}
source to share