javascript - ejemplo - dropzone laravel

dropzone.js: cómo hacer algo después de cargar TODOS los archivos

Question

Estoy usando dropzone.js para mi solución de carga de archivos de arrastrar y soltar. Estoy atrapado en algo donde necesito llamar a una función después de que se cargan todos los archivos. En este caso,

Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
this.on("complete", function (file) {
doSomething();
});
}
};

Se llamará a doSomething () para cada archivo que se haya cargado. ¿Cómo puedo llamar a una función después de cargar todos los archivos?

Answer 1

Además de la respuesta de @ enyo al buscar archivos que aún se están cargando o en la cola, también creé una nueva función en dropzone.js para verificar si hay algún archivo en un estado ERROR (es decir, un tipo de archivo incorrecto, tamaño, etc.).

Dropzone.prototype.getErroredFiles = function () {
var file, _i, _len, _ref, _results;
_ref = this.files;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
file = _ref[_i];
if (file.status === Dropzone.ERROR) {
_results.push(file);
}
}
return _results;
};

Y así, el cheque se convertiría en:

 if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && this.getErroredFiles().length === 0) {
doSomething();
}

Answer 2

Estaba tratando de trabajar con esas soluciones, pero no funciona. Pero más tarde me di cuenta de que la función no estaba declarada, así que miro la página dropzone.com y tomo el ejemplo para llamar a eventos. Así que finalmente trabajo en mi sitio. Para aquellos como yo que no entienden muy bien JavaScript, les dejo el ejemplo.

<script type="text/javascript" src="/js/dropzone.js"></script>
<script type="text/javascript">
// This example uses jQuery so it creates the Dropzone, only when the DOM has
// loaded.
// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;
// or disable for specific dropzone:
// Dropzone.options.myDropzone = false;
$(function() {
// Now that the DOM is fully loaded, create the dropzone, and setup the
// event listeners
var myDropzone = new Dropzone(".dropzone");
myDropzone.on("queuecomplete", function(file, res) {
if (myDropzone.files[0].status != Dropzone.SUCCESS ) {
alert(''yea baby'');
} else {
alert(''cry baby'');
}
});
});
</script>

Answer 3

La respuesta aceptada no es necesariamente correcta. queuecomplete se queuecomplete incluso cuando el archivo seleccionado sea más grande que el tamaño máximo de archivo.

El evento apropiado para usar es successmultiple o completemultiple .

Referencia: http://www.dropzonejs.com/#event-successmultiple

Answer 4

Le voté como tu método es simple. Solo realicé un par de enmiendas ligeras, ya que a veces el evento se dispara aunque no haya bytes para enviar. En mi máquina lo hizo cuando hice clic en el botón Eliminar en un archivo.

myDropzone.on("totaluploadprogress", function(totalPercentage, totalBytesToBeSent, totalBytesSent ){
if(totalPercentage >= 100 && totalBytesSent) {
// All done! Call func here
}
});

Answer 5

Probablemente hay una forma (o tres) de hacerlo ... sin embargo, veo un problema con su objetivo: ¿cómo sabe cuándo se han cargado todos los archivos? Para reformular de una manera que tenga más sentido ... ¿cómo sabes lo que significa "todo"? De acuerdo con la documentación, se llama a init en la inicialización de Dropzone, y luego configura el controlador de eventos complete para que haga algo cuando se completa cada archivo que se carga. Pero, ¿qué mecanismo le da el usuario para permitir que el programa sepa cuándo dejó caer todos los archivos que intentaba eliminar? Si está asumiendo que hará una bajada de lotes (es decir, colocar en la Dropzone 2 -cualquier cantidad de archivos, a la vez, en una sola acción), entonces el siguiente código podría / podría funcionar:

Dropzone.options.filedrop = {
maxFilesize: 4096,
init: function () {
var totalFiles = 0,
completeFiles = 0;
this.on("addedfile", function (file) {
totalFiles += 1;
});
this.on("removed file", function (file) {
totalFiles -= 1;
});
this.on("complete", function (file) {
completeFiles += 1;
if (completeFiles === totalFiles) {
doSomething();
}
});
}
};

Básicamente, miras cada vez que alguien agrega / elimina archivos de la Zona de Descenso y registras las variables de cierre. Luego, cuando se completa la descarga de cada archivo, se incrementa el var de contador de progreso completeFiles Archivos, y se ve si ahora es igual al total de Coincidencia que ha estado viendo y actualizando a medida que el usuario ha colocado cosas en Dropzone. (Nota: nunca usó el plugin / JS lib., Por lo que es mejor adivinar qué podría hacer para obtener lo que desea).

Answer 6

Se agregó un evento ''queuecomplete''. Ver el número 317 .

Answer 7

Simplemente use queuecomplete para lo que está ahí y es muy simple. Verifique los documentos http://www.dropzonejs.com/

queuecomplete > Se invoca cuando todos los archivos en la cola terminan de cargarse.

 this.on("queuecomplete", function (file) {
alert("All files have uploaded ");
});

Answer 8

EDITAR: ahora hay un evento queuecomplete que puede usar exactamente para ese propósito.

Respuesta anterior:

La respuesta de Paul B. funciona, pero una forma más sencilla de hacerlo es verificando si todavía hay archivos en la cola o cargando cada vez que se completa un archivo. De esta forma, no tiene que hacer un seguimiento de los archivos usted mismo:

Dropzone.options.filedrop = {
init: function () {
this.on("complete", function (file) {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
doSomething();
}
});
}
};

Answer 9

this.on("totaluploadprogress", function(totalBytes, totalBytesSent){
if(totalBytes == 100) {
//all done! call func here
}
});