Come limitare il numero di file dropzone.js caricati?

A seconda del caso d’uso, come posso limitare il numero di file consentito da dropzone.js?

Ad esempio, potrei dover consentire solo 1, 2 o 4 file caricati.

Non è uploadMultiple . Sfortunatamente, uploadMultiple si applica solo al numero di file gestiti per richiesta.

Ho raggiunto questo un modo leggermente diverso. Rimuovo il vecchio file abbandonato ogni volta che viene aggiunto un nuovo file. Funziona come sovrascrivere il file che è stata l’esperienza utente che stavo andando qui.

 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 ha sottolineato che questo è stato risolto il 6 agosto 2013. Un esempio di utilizzo di questo modulo potrebbe essere:

 

Puoi usare questo 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!"); }); } }; 

L’elemento dropzone ha anche uno stile speciale, quindi puoi fare cose come:

  

Ho pensato che il processo di upload su singolo file più intuitivo fosse quello di sostituire il file precedente su una nuova voce.

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

maxFiles: 1 fa il lavoro ma se vuoi anche rimuovere i file aggiuntivi puoi usare questo codice di esempio preso dalla pagina Wiki :

Come posso limitare il numero di file?

Sei fortunato! A partire da 3.7.0 Dropzone supporta l’opzione maxFiles. Basta impostarlo sulla quantità desiderata e sei a posto. Se non si desidera visualizzare i file rifiutati, è sufficiente registrarsi per l’evento maxfilesexceeded e rimuovere immediatamente il file:

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

sembra che maxFiles sia il parametro che stai cercando.

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

Puoi limitare il numero di file caricati cambiando in dropezone.js

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

Il problema con le soluzioni fornite è che puoi caricare solo 1 file in assoluto. Nel mio caso, avevo bisogno di caricare solo 1 file alla volta (su click o su drop).

Questa era la mia soluzione ..

  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; }; } }; 

Spero che questo ti aiuti 😉

Mi piacerebbe sottolineare. forse questo mi capita, TUTTAVIA, quando uso this.removeAllFiles () in dropzone, spara l’evento COMPLETO e questo succede, quello che ho fatto è stato controllare se il file Data era vuoto o meno così potevo effettivamente inviare il modulo.

Perché non usi semplicemente CSS per disabilitare l’evento click. Quando viene raggiunto il numero massimo di file, Dropzone aggiungerà automaticamente una class di file dz-max-raggiunti.

Usa css per disabilitare click su dropzone:

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

Credito: questa risposta

Puoi anche aggiungere callbacks – qui sto usando Dropzone per 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); } } 

Soluzione alternativa che ha funzionato molto bene per me:

 init: function() { this.on("addedfile", function(event) { while (this.files.length > this.options.maxFiles) { this.removeFile(this.files[0]); } }); } 
 Dropzone.options.dpzSingleFile = { paramName: "file", // The name that will be used to transfer the file maxFiles: 1, init: function() { this.on("maxfilesexceeded", function(file) { this.removeAllFiles(); this.addFile(file); }); } };