javascript - tutorial - dropzone with normal form

dropzone js onclick enviar archivo subir

Question

Sube todos los archivos con un solo clic.
HTML:

<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>

JS:

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

Pero el archivo se carga después de arrastrar y soltar ..

Answer 1

Acabo de terminar de jugar con esto yo mismo. Quería agregar información sobre la imagen a una base de datos al mismo tiempo que la subía. Al soltar un archivo, se abre el formulario de entrada para la información adicional y luego se debe enviar la cola después de presionar el botón del formulario.

Finalmente logré esto al poner un controlador de eventos jquery click dentro del evento de la función init ''on add file'':

this.on("addedfile", function(file){
  var myDropzone = this;
  $(''#imageinfoCont'').animate({left:''4.5%''});//brings form in
  $(''#imgsubbutt'').click(function(){
    $(''#imageinfoCont'').animate({left:''-10000px''}); //hides the form again
    myDropzone.processQueue(); //processes the queue
  });
});

Luego, estoy agregando los datos adicionales en un evento de función ''al enviar'' (lo cual probablemente podría hacerlo en el código anterior, pero creo que en pequeños pasos).

Parece que funciona como un encanto.

Answer 2

Aquí, cómo implemento la carga diferida (iniciada haciendo clic en cualquier botón, por ejemplo):

Implementación de Dropzone

var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
    paramName: "file", // The name that will be used to transfer the file
    addRemoveLinks: true,
    maxFilesize: 5, // MB
    parallelUploads: 5,
    uploadMultiple: true,
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
    maxFiles: 10,
    init: function() {
        this.on("removedfile", function (file) {
            // delete from our dict removed file
            delete addedFilesHash[file];
        });
    },
    accept: function(file, done) {
        var _id = count++;
        file._id = _id;
        addedFilesHash[_id] = done;
    }
});

En algún otro lugar

    // get all uploaded files in array
    var addedFiles = Object.keys(addedFilesHash);
    // iterate them
    for (var i = 0; i< addedFiles.length; i++) {
        // get file obj
        var addedFile = addedFiles[i];
        // get done function
        var doneFile = addedFilesHash[addedFile];
        // call done function to upload file to server
        doneFile();
    }

removedFile funciones de accept y removedFile . En la función de accept , recopilamos objetos de file y funciones done en dict donde la clave es file y el valor se done función. Más tarde, cuando estemos listos para cargar los archivos agregados, estamos iterando todas las funciones done para todos los archivos en dict addedFilesHash que inicia el progreso de la carga con la barra de progreso y etc.

Answer 3

Aunque esto ha sido respondido, me encontré con una situación en la que solo quería enviar la cola SI era un tipo de archivo determinado. El error que encontré fue que estaba ignorando processQueue .

  this.dropzone = new Dropzone(''#my-dropzone'', {
    autoProcessQueue: false,
  });
  return this.dropzone.on(''addedfile'', (function(_this) {
    return function(file) {

      var IMAGE_EXTENSIONS, ext;
      IMAGE_EXTENSIONS = ''png jpg jpeg gif''.split('' '');
      ext = (_.last(file.name.split(''.''))).toLowerCase();

      if (_.include(IMAGE_EXTENSIONS, ext)) {
        return console.log(''IMAGE!'');
      } else {

        return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
          return _this.dropzone.processQueue();
        }, 10);
      }
    };
  })(this));

Tuve que usar el setTimeout visto anteriormente porque processQueue no hizo nada si no lo aplazé de esta manera.

Answer 4

Logré esto colocando mi Dropzone en un div en lugar de un formulario, eliminando así la posibilidad de que Dropzone POST automáticamente las cargas a una URL determinada. La URL que pasé a la instancia de Dropzone cuando la creé es literalmente "ficticia", ya que nunca se llamará. Por ejemplo, HTML

<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>

JavaScript

$(''#submit-all'').on(''click'', function() {
    var files = $(''#my-dropzone'').get(0).dropzone.getAcceptedFiles();
    // Do something with the files.
});

Answer 5

usar código simple

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
  url: "/upload.php",                        
  autoProcessQueue: false,
});

$(''#imgsubbutt'').click(function(){           
  myDropzone.processQueue();
});