javascript - Dropzone subir solo un archivo

php dropzone.js

Question

Estoy usando dropzone.js para mi solución de carga de archivos con arrastrar y soltar. Quiero cargar solo un archivo, si subo el segundo archivo, el primero debería eliminarse y el segundo debería cargarse. alguna idea de cómo hacerlo ...

aqui esta mi html

<form class="dropzone dz-clickable" action="upload.php" enctype=''multipart/form-data''>
  <i class="fa fa-cloud-upload element"></i>
  <div style="color:gray;">Drag and drop or click to upload image</div>
  <input type="hidden" name="filenameEmail" class="filenameEmail" value="">
  <input type="hidden" name="side" value="front">
</form>

cambié dropzone.js

maxFiles: 1

permite cargar solo un archivo, pero no puedo eliminar el archivo cargado anteriormente. Por favor, ayúdame. Gracias de antemano.

Answer 1

La limitación de maxFiles a 1 aún permite seleccionar varios archivos en el cuadro de diálogo de carga. Para rechazar la selección de varias imágenes en la configuración, especifique la siguiente función init:

maxFiles:1,
init: function() {
    this.hiddenFileInput.removeAttribute(''multiple'');
}  

Answer 2

Ninguna de estas soluciones funcionó para mí.

El evento maxfilesexceeded se llama demasiado tarde, es decir, después de un intento de agregar el archivo.

Otras soluciones que utilizan this.removeFile(this.files[0]); dio como resultado un "Uncaught TypeError: Cannot read property ''removeChild'' of null". o un bucle infinito.

Resuelto por -

maxFiles: 2,
init: function () {

    this.on("addedfile", function (file) {
        if (this.files.length > 1) {
            this.files = this.files.slice(1, 2);                        
        }
    });

}

Funciona cuando se usa dz-clickable (seleccionador de archivos btn) y arrastrar y soltar.

Answer 3

Utilicé el evento maxfilesexceeded con el método addFile y las rans en un bucle infinito de llamada de evento. Debería ser el problema de usar addFile porque no lo vi mencionado en el sitio oficial o en la wiki de GitHub. Finalmente lo resolví con el evento de addedfile . Dropzone.js es la última versión cuando escribo (4.3.0).

init: function() {
  this.on(''addedfile'', function(file) {
    if (this.files.length > 1) {
      this.removeFile(this.files[0]);
    }
  });
}

Answer 4

maxFiles: 1 se utiliza para indicar a Dropzone que solo debe haber un archivo. Cuando haya más de 1 archivo, se maxfilesexceeded la función maxfilesexceeded , con el archivo excedente como primer parámetro.

Aquí hay una función simple para eliminar la vista previa del primer archivo y agregar el nuevo :)

maxFiles:1,
init: function() {
      this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
      });
}   

Answer 5

 Dropzone.prototype.defaultOptions.init = function () {

                 this.hiddenFileInput.removeAttribute(''multiple'');
                 this.on("maxfilesexceeded", function (file) {
                     this.removeAllFiles();
                     this.addFile(file);
                 });
             };

Esto es un trabajo para mí.