How to limit the number of downloads dropzone.js?

Question

Depending on the option used, how to limit the number of files that dropzone.js will allow?

For example, I may need to allow only 1, 2, or 4 files to be downloaded.

This is not uploadMultiple . Unfortunately, uploadMultiple only applies to the number of files processed in the request.

Answer 1

Nowell pointed out that this has been reviewed since August 6, 2013. A working example using this form might be:

 <form class="dropzone" id="my-awesome-dropzone"></form> 

You can 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> 

Answer 2

I did it a little differently. I simply delete the old dumped file anytime a new file is added. It acts like overwriting a file that was the user I was going to 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]); } }); } }; 

Answer 3

I thought the most intuitive process of uploading a single file was to replace the previous file with a new record.

  $(".drop-image").dropzone({ url: '/cart?upload-engraving=true', maxFiles: 1, maxfilesexceeded: function(file) { this.removeAllFiles(); this.addFile(file); } }) 

Answer 4

maxFiles: 1 does the job, but if you also want to delete additional files, you can use this sample code taken on the Wiki page:

How to limit the number of files?

What a score! Starting with 3.7.0 Dropzone supports the maxFiles option. Just set it to the right amount and you're good to go. If you do not want rejected files to be viewed, simply register for the maxfilesexceeded event and delete the file immediately:

 myDropzone.on("maxfilesexceeded", function(file) { this.removeFile(file); }); 

Answer 5

it looks like maxFiles is the parameter you are looking for.

https://github.com/enyo/dropzone/blob/master/src/dropzone.coffee#L667

Answer 6

You can limit the number of downloaded files by changing dropezone.js in the file

Dropzone.prototype.defaultOptions = {maxFiles: 10,}

Answer 7

The problem with the solutions provided is that you can only upload one file at a time. In my case, I only needed to upload 1 file at a time (on click or on deletion).

That was my decision.

  Dropzone.options.myDropzone = { maxFiles: 2, init: function() { this.handleFiles = function(files) { var file, _i, _len, _results; _results = []; for (_i = 0, _len = files.length; _i < _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 && this.options.maxFiles > 0 && _i >= (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 < _len; _i++) { item = items[_i]; if ((item.webkitGetAsEntry != null) && (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 && this.options.maxFiles > 0 && _i >= (this.options.maxFiles - 1)) { break; } } return _results; }; } }; 

Hope this helps;)

Answer 8

I would like to point out. maybe this just happens to me, HOWEVER, when I use this.removeAllFiles () in dropzone, it fires the COMPLETE event and it hits, I did a check if fileData is empty or not, so I can really submit the form.

Answer 9

Why don't you just use CSS to disable the click event. When the maximum files are reached, Dropzone will automatically add the dz-max-files-reached class.

Use css to disable click on dropzone:

 .dz-max-files-reached { pointer-events: none; cursor: default; } 

Credit: this answer

Answer 10

You can also add callbacks - here I use 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); } }