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

dropzone only one file

Question

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.

Answer 1

¿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 answer

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

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

Answer 9

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

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

Answer 10

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

Answer 11

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:

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

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:

<style>
  .dz-max-files-reached {background-color: red};
</style>

Answer 12

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