¿Cómo limitar el número de archivos dropzone.js cargados?

Dependiendo del caso de uso, ¿cómo restrinjo el número de archivos que dropzone.js permitirá?

Por ejemplo, podría necesitar solo permitir 1, 2 o 4 archivos cargados.

No es uploadMultiple . Desafortunadamente, uploadMultiple solo se aplica a la cantidad de archivos que se manejan por solicitud.

Lo logré de una manera ligeramente diferente. Solo elimino el archivo viejo que soltó cada vez que se agrega un nuevo archivo. Actúa como sobrescribir el archivo que era la experiencia del usuario que estaba buscando aquí.

 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 señaló que esto se abordó a partir del 6 de agosto de 2013. Un ejemplo práctico que utiliza este formulario podría ser:

 

Puedes usar este 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!"); }); } }; 

El elemento dropzone incluso tiene un estilo especial, por lo que puedes hacer cosas como:

  

Pensé que el proceso de carga de un solo archivo más intuitivo era reemplazar el archivo anterior por una nueva entrada.

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

maxFiles: 1 hace el trabajo, pero si también quieres eliminar los archivos adicionales, puedes usar este código de ejemplo tomado de la página Wiki :

¿Cómo puedo limitar la cantidad de archivos?

¡Estás de suerte! A partir de 3.7.0 Dropzone admite la opción maxFiles. Simplemente configúralo en la cantidad deseada y listo. Si no desea que se vean los archivos rechazados, simplemente regístrese para el evento maxfilesexceeded y elimine el archivo inmediatamente:

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

parece que maxFiles es el parámetro que está buscando.

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

Puede limitar la cantidad de archivos cargados cambiando en dropezone.js

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

El problema con las soluciones proporcionadas es que solo puede cargar 1 archivo cada vez. En mi caso, necesitaba subir solo 1 archivo a la vez (al hacer clic o al soltar).

Esta fue mi solución …

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

Espero que esto ayude 😉

Me gustaría señalar. tal vez esto me pasa a mí, SIN EMBARGO, cuando uso this.removeAllFiles () en dropzone, se dispara el evento COMPLETE y esto suena, lo que hice fue verificar si el fileData estaba vacío o no para poder enviar el formulario.

¿Por qué no solo usa CSS para deshabilitar el evento click? Cuando se alcanzan los archivos max, Dropzone agregará automáticamente una clase de dz-max-files-reached.

Use css para deshabilitar, haga clic en dropzone:

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

Crédito: esta respuesta

También puede agregar callbacks: aquí estoy usando Dropzone para 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); } } 

Una solución alternativa que funcionó muy bien para mí:

 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); }); } }; 
Intereting Posts