javascript - div - dropzone js upload php

Dropzone.js carga solo dos archivos cuando autoProcessQueue se establece en falso

Question

Yo uso Dropzone.js y quiero que se cargue el archivo no automáticamente, pero cuando el usuario hace clic en un botón. Entonces configuro la opción autoProcessQueue en false . Cuando se hace clic en el botón, se llama al método processQueue() . Supongo que ahora se procesa la cola completa. Pero ese no es el caso. Solo se cargará la cantidad de archivos especificados en la opción parallelUploads . El valor estándar de parallelUploads parece ser 2. Lo que cada clic 2 archivos se procesan y cargan.

¿Tengo que establecer parallelUploads en un número muy alto, por ahora para resolver esto?

Aquí está mi código JS completo:

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

Answer 1

Agregar overdrive dos eventos como

procesamiento -> Permitir cargar todo el archivo

queuecomplete -> Volver a la normalidad

    init: function () {

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

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

    };

Answer 2

Agregue paraleloUploads: 10 (este es su máximo no)

Answer 3

Creo que puedes permitir uploadMultiple y cambiar el archivo dropzone.js.

Primero, permite uploadMultiple Next, cambia este código de línea en dropzone.js:

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

para

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

Answer 4

Esto lo resolvió para mí, sin cambiar ningún código de dropzone.js ni anular la configuración de parallelUploads.

$(''#submit'').click(function(e){
  e.preventDefault();

  function tryQueue(){
    var numQueued=dz.getQueuedFiles().length;
    var numFiles=numQueued+dz.getUploadingFiles().length;
    if(numQueued>0){
      dz.processQueue();
    }
    if(numFiles>0){
      setTimeout(tryQueue,1000);
    }
    else window.location=''/''; //redirect when finished
  }
  tryQueue();
});

Esto supone que dz es la instancia de dropzone. Funciona al invocar processQueue hasta que todos hayan sido cargados. La lógica en processQueue se encarga de regresar si no se necesita hacer nada para que no haya daños en la votación.

Answer 5

Hay una manera simple de resolver esto que se puede encontrar aquí:

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

"Si quiere que autoProcessQueue sea verdadero después de la primera carga, simplemente escuche el evento de procesamiento y establezca this.options.autoProcessQueue = true; inside".

Así que solo agrega

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

Answer 6

Mi solución es:

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

Answer 7

Muy tarde, pero tal vez ayude a alguien.

Me di cuenta cuando coloqué maxFilesSize arriba de parallerUploads no funcionó.

Entonces la secuencia para las opciones debería ser.

.
.
parallelUploads: 20,    
maxFilesize: 2, 
maxFiles: 20,
.
.

Answer 8

Un poco tarde, pero no estaba contento con las otras respuestas, así que aquí está el mío.

Cambiar autoProcessingQueue (incluso temporalmente) después de hacer clic en enviar significa que si agrega otro archivo a la zona de colocación mientras que otros aún están en cola, se cargará sin tener que presionar enviar de nuevo, lo que no quería. Y tampoco quería usar un setTimeout o un busyloop. Así que aquí está cómo hacerlo sin ninguno:

Modificar el archivo dropzone.js Primero, en la función Dropzone, necesita agregar una segunda matriz de archivos para almacenar la cola cuando se presiona enviar:

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

A continuación, guarde los archivos en él cuando se hace clic en enviar modificando processQueue

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

Finalmente, edite la función _finished para que cuando termine de cargar un archivo, se envíe otro archivo si todavía quedaban algunos en la cola cuando se presionó el envío:

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