How to limit the number of dropzone.js files uploaded?
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.
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]);
}
});
}
};
Nowell pointed it out that this has been addressed as of August 6th, 2013. A working example using this form might be:
<form class="dropzone" id="my-awesome-dropzone"></form>
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:
<style>
.dz-max-files-reached {background-color: red};
</style>
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);
}
})