Dropzone.js – comment faire quelque chose après l'envoi de tous les fichiers

EDIT: Il existe maintenant un événement queuecomplete que vous pouvez utiliser exactement à cet effet.

Réponse précédente:

La réponse de Paul B. fonctionne, mais une façon plus facile de le faire, c'est en vérifiant s'il y a encore des fichiers dans la file d'attente ou le téléchargement chaque fois qu'un fichier est terminé. De cette façon, vous ne devez pas suivre les fichiers vous-même:

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

Il suffit d'utiliser queuecomplete c'est ce qui est là pour et c'est tellement simple. Vérifiez les documents http://www.dropzonejs.com/

Queuecomplete > Appelé lorsque tous les fichiers de la file ont fini de télécharger.

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

Il y a probablement une façon (ou trois) de faire cela … cependant, je vois un problème avec votre objectif: comment savez-vous quand tous les fichiers ont été téléchargés? Pour reformuler d'une manière qui a plus de sens … comment savez-vous ce que "tout" signifie? Selon la documentation, init est appelé lors de l'initialisation de la Dropzone elle-même, puis vous configurez le gestionnaire d'événements complete pour faire quelque chose lorsque chaque fichier téléchargé est terminé. Mais, quel mécanisme est l'utilisateur donné pour permettre au programme de savoir quand il a abandonné tous les fichiers qu'il a l'intention de déposer? Si vous supposez qu'il / elle fera un batch drop (c.-à-d., Déposez sur Dropzone 2, quel que soit le nombre de fichiers, à la fois, dans une action de goutte), alors le code suivant pourrait éventuellement fonctionner:

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

Fondamentalement, vous regardez chaque fois que quelqu'un ajoute / supprime des fichiers de Dropzone et continue à compter les variables de fermeture. Ensuite, lorsque le téléchargement de chaque fichier est terminé, vous augmentez le compteur de progression completeFiles , et voyez s'il est égal à la quantité totale que vous aviez surveillée et mise à jour lorsque l'utilisateur a placé des objets dans la zone de dépôt. (Remarque: jamais utilisé le plug-in / JS lib., Donc c'est mieux comprendre ce que vous pourriez faire pour obtenir ce que vous voulez).

Un événement 'queuecomplete' a été ajouté. Voir le numéro 317 .

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

Je vous ai voté comme méthode simple. Je n'ai fait qu'un couple de légères modifications, car parfois l'événement se déclenche même s'il n'y a pas d'octets à envoyer. Sur ma machine, il l'a fait lorsque j'ai cliqué sur le bouton Supprimer sur un fichier.

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

En plus de la réponse de @ enyo dans la vérification des fichiers qui sont encore en cours de chargement ou dans la file d'attente, j'ai également créé une nouvelle fonction dans dropzone.js pour vérifier les fichiers dans un état ERROR (c'est-à-dire un mauvais type de fichier, une taille, 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; }; 

Et ainsi, la vérification deviendrait:

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

J'essayais de travailler avec ces solutions mais ça ne marche pas. Mais plus tard, je me suis rendu compte que la fonction n'était pas déclarée, alors je regarde la page dropzone.com et prends l'exemple pour appeler des événements. Alors, finalement, travaillez sur mon site. Pour ceux comme moi qui ne comprennent pas très bien JavaScript, je vous laisse l'exemple.

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