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í.