dropzone.js - come fare qualcosa dopo che TUTTI i file sono stati caricati

Question

Sto usando dropzone.js per la mia soluzione di upload di file drag-drop. Sono bloccato a qualcosa in cui ho bisogno di chiamare una funzione dopo tutti i file caricati. In questo caso,

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

doSomething() verrà chiamato per ogni file che è stato caricato. Come posso chiamare una funzione dopo che tutti i file sono stati caricati?

Answer 1

EDIT: V'è ora un evento queuecomplete che è possibile utilizzare esattamente per quello scopo.

---

risposta precedente:

Paul B.'s answer opere, ma un modo più semplice per farlo, è controllando se ci sono ancora dei file nella coda o il caricamento ogni volta che un file viene completata. In questo modo non c'è bisogno di tenere traccia dei file stessi:

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

Answer 2

Probabilmente c'è un modo (o tre) per farlo ... tuttavia, vedo un problema con il tuo obiettivo: come fai a sapere quando tutti i file sono stati caricati? Riformulare in un modo che ha più senso ... come fai a sapere cosa significa "tutto"? Secondo la documentazione, init viene richiamato durante l'inizializzazione di Dropzone stesso, e quindi si imposta il gestore di eventi complete per fare qualcosa quando ogni file che viene caricato è completo. Ma quale meccanismo viene dato all'utente per consentire al programma di sapere quando ha lasciato cadere tutti i file che ha intenzione di abbandonare? Se si presume che lui/lei farà una caduta batch (cioè, cadere sul Dropzone 2-qualunque numero di file, in una sola volta, in un'azione di una sola goccia), quindi il seguente codice potrebbe/dovrebbe funzionare:

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

Fondamentalmente, si guarda ogni volta che qualcuno aggiunge/rimuove i file da Dropzone e tiene un conteggio nelle variabili di chiusura. Quindi, una volta completato il download di ogni file, si incrementa il contatore di progresso completeFiles var, e si verifica se ora equivale al totalCount che stavi guardando e aggiornando mentre l'utente posizionava le cose nel Dropzone. (Nota: non ha mai usato il plug-in/JS lib, quindi questo è migliore ipotesi su cosa si potrebbe fare per ottenere quello che vuoi..)

Answer 3

this.on("totaluploadprogress", function(totalBytes, totalBytesSent){ 


        if(totalBytes == 100) { 

         //all done! call func here 
        } 
       }); 

Answer 4

Un evento 'queuecomplete' è stato aggiunto. Vedi Issue 317.

Answer 5

Ho votato come il tuo metodo è semplice. Ho fatto solo un paio di modifiche leggere a volte l'evento si attiva anche se non ci sono byte da inviare - Sulla mia macchina lo ha fatto quando ho fatto clic sul pulsante Rimuovi su un file.

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

Answer 6

Oltre a @ di Enyo risposta nel controllo per i file che sono ancora il caricamento o in coda, ho anche creato una nuova funzione in dropzone.js per verificare la presenza di eventuali file in stato di errore (ad esempio il tipo di file male , dimensioni, ecc.).

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

E così, il controllo sarebbe diventato:

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

Answer 7

Basta usare queuecomplete questo è ciò che è là e il suo modo così semplice.Controllare la documentazione http://www.dropzonejs.com/

queuecomplete> chiamato quando tutti i file in coda ha terminato il caricamento.

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

Answer 8

stavo cercando di lavorare con che le soluzioni, ma non funziona. Ma in seguito mi sono reso conto che la funzione non è stata dichiarata, quindi guardo nella pagina dropzone.com e prendo l'esempio per chiamare gli eventi. Quindi finalmente lavoro sul mio sito. Per quelli come me che non capiscono JavaScript molto bene, vi lascio l'esempio.

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