dropzone sube solo un archivo

Estoy usando dropzone.js para mi solución de carga de archivos de arrastrar y soltar. Quiero cargar solo un archivo, si cargo un segundo archivo, el primero debe eliminarse y el segundo debe cargarse. alguna idea de como hacerlo..

aquí está 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údenme. Gracias de antemano.

maxArchivos: 1 se usa para decirle a dropzone que solo debe haber un archivo. Cuando hay más de 1 archivo la función maxfilesuperado será llamado, con el archivo excedente como primer parámetro.

aquí hay una función simple para eliminar la vista previa del primer archivo y agregar uno nuevo 🙂

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

usé evento maxfilesexceeded con metodo addFile y se topa con Bucle infinito de llamada de evento. Debería ser el problema de usar addFile porque no lo vi mencionado ni en el sitio oficial ni en la wiki de GitHub. Finalmente resolví con addedfile evento. 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]);
    }
  });
}

limitando maxFiles a 1 todavía permite seleccionar varios archivos en el cuadro de diálogo de carga. Para no permitir la selección de varias imágenes en la configuración, especifique la siguiente función de inicio:

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

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

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

esto es trabajo para mí.

La combinación de dos soluciones hace el trabajo por mí en la función de inicio:

        this.on("addedfile", function (file) {
            if (this.files.length > 1) {
                this.removeAllFiles()
                this.addFile(file);
            }
        });

este trabajo para mi

const dropzoneInput = document.querySelectorAll('.dz-hidden-input')
for (const input of dropzoneInput) {
    if (input.getAttribute('multiple')) {
        input.removeAttribute('multiple')
    }
}

Esto lo que hace es validar si la entrada de dropzone tiene un atributo múltiple, si lo tiene, elimina la identificación

Nota: la clase .dz-entrada oculta puede ser diferente para usted.

Ninguna de estas soluciones funcionó para mí.

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

Otras soluciones utilizando this.removeFile(this.files[0]); resultó en 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 (selector de archivos btn) y arrastrar y soltar.