web-dev-qa-db-fra.com

Dropzone.js ne télécharge que deux fichiers lorsque autoProcessQueue est défini sur false

J'utilise Dropzone.js et je veux qu'il télécharge le déposé pas automatiquement, mais lorsque l'utilisateur clique sur un bouton. J'ai donc défini l'option autoProcessQueue sur false. Lorsque le bouton est cliqué, la méthode processQueue() est appelée. Je suppose que maintenant la file d'attente complète est traitée. Mais ce n'est pas le cas. Seul le nombre de fichiers spécifié dans l'option parallelUploads sera chargé. La valeur standard de parallelUploads semble être 2. Quels fichiers sont traités et téléchargés à chaque clic 2.

Dois-je définir parallelUploads sur un nombre très élevé pour résoudre ce problème?

Voici mon code JS complet:

var myDropzone = new Dropzone("div#myId", {
  url: "http://www.torrentplease.com/dropzone.php",
  addRemoveLinks: true,
  thumbnailWidth: "80",
  thumbnailHeight: "80",
  dictCancelUpload: "Cancel",
  autoProcessQueue: false
});

myDropzone.on("drop", function(event) {
  $('.edit_tooltip .option_bar').animate({
    opacity: 1,
    top: "-5"
  });
});


$('.edit_tooltip .option_bar .button').click(function() {
  myDropzone.processQueue();
});
javascriptjqueryfile-uploaddropzone.js
31
Juuro

Ajouter parallelUploads: 10 (Ceci est votre max non)

34
Venom

Il existe un moyen simple de résoudre ce problème qui peut être trouvé ici:

https://github.com/enyo/dropzone/issues/253#issuecomment-22184190

"Si vous voulez que autoProcessQueue soit vraie après le premier téléchargement, écoutez simplement l'événement de traitement et définissez this.options.autoProcessQueue = true; inside."

Alors ajoutez simplement

this.on("processing", function() {
    this.options.autoProcessQueue = true;
});
27
Bianka M.

Ma solution est:

// init dropzone with auto process queue false
var adPhotosDropzone = new Dropzone("#dropzone", {
    autoProcessQueue: false,
    parallelUploads: 3
});

$(document).on('click', '#btnUpload', function () {
    // enable auto process queue after uploading started
    adPhotosDropzone.options.autoProcessQueue = true;
    // queue processing
    adPhotosDropzone.processQueue();
});

// disable queue auto processing on upload complete
adPhotosDropzone.on("queuecomplete", function() {
    adPhotosDropzone.options.autoProcessQueue = false;
});
14
Viktor Sanzharevskyy

Très tard, mais peut-être que cela aidera quelqu'un.

J'ai remarqué que lorsque j'ai placé maxFilesSize au-dessus de parallerUploads, cela n'a pas fonctionné.

Donc, la séquence pour les options devrait être .

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.
4
m.qayyum

Ajouter overdrive deux événement comme 

traitement -> Autoriser le téléchargement de tous les fichiers 

queuecomplete -> Revenir à la normale

    init: function () {

            this.on("queuecomplete", function () {
                this.options.autoProcessQueue = false;
            });

            this.on("processing", function () {
                this.options.autoProcessQueue = true;
            });

    };
3
Ahmad Aghazadeh

Je pense que vous pouvez autoriser uploadMultiple et modifier le fichier dropzone.js.

Tout d'abord, autorisez uploadMultipleNext, changez le code de cette ligne en dropzone.js:

return this.processFiles (queuedFiles.slice (0, parallelUploads - processingLength));

pour 

renvoie this.processFiles (queuedFiles.slice (0, queuedFiles.length)); 

0
user2938512

Un peu tard, mais les autres réponses ne m'ont pas satisfait, alors voici la mienne.

Si vous modifiez autoProcessingQueue (même temporairement) après avoir cliqué sur Envoyer, cela signifie que si vous ajoutez un autre fichier à la zone de dépôt pendant que d'autres sont toujours en file d'attente, il sera téléchargé sans que vous ayez à appuyer de nouveau sur Envoyer, ce que je ne voulais pas. Et je ne voulais pas non plus utiliser setTimeout ou busyloop. Alors, voici comment le faire sans soit: 

Modifiez le fichier dropzone.js. Tout d’abord, dans la fonction Dropzone, vous devez ajouter un second tableau de fichiers pour stocker la file d’attente lorsque l’envoi est activé: 

function Dropzone(element, options) {
  ...
  this.files = [];
  this.files2 = [];

Ensuite, sauvegardez les fichiers lorsque vous cliquez sur envoyer en modifiant processQueue.

Dropzone.prototype.processQueue = function() {
  this.files2 = this.getQueuedFiles();
  ...

Enfin, éditez la fonction _finished de sorte que lorsqu'un fichier est chargé, un autre fichier soit envoyé s'il en reste un dans la file d'attente au moment de l'envoi:

Dropzone.prototype._finished = function(files, responseText, e) {
  var file, _i, _len;
  for (_i = 0, _len = files.length; _i < _len; _i++) {
    file = files[_i];
    file.status = Dropzone.SUCCESS;
    this.emit("success", file, responseText, e);
    this.emit("complete", file);
    this.files2 = this.files2.filter(function(e) { return e.status == "queued" }); // Remove the files that are finished or already being uploaded
  }
  if (this.options.uploadMultiple) {
    this.emit("successmultiple", files, responseText, e);
    this.emit("completemultiple", files);
  }
  if (this.options.autoProcessQueue) {
    return this.processQueue();
  }
  else {
      if (typeof this.files2 != "undefined" && this.files2.length > 0) {
          this.processFiles(this.files2.slice(0,1)); // process the next file if there's one
      }
  }
};
0
Dino