Dropzone js onclick отправить загрузку файла

Загрузка всех файлов одним нажатием кнопки.
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.
    });

  }
};

Но файл загружается после перетаскивания.

Ответы

Ответ 1

используйте простой код

Dropzone.autoDiscover = false;

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

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

Ответ 2

Я выполнил это, поставив свою dropzone в div вместо формы, тем самым исключив возможность dropzone автоматически POST загружать на заданный URL. URL-адрес, который я передал экземпляру dropzone, когда я его создал, буквально 'dummy', поскольку он никогда не будет вызван. Например, 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.
});

Ответ 3

Я только что закончил с этим, - я хотел добавить информацию об изображении в базу данных одновременно с загрузкой. Удаление файла открывает форму ввода для дополнительной информации, а затем очередь должна отправляться после нажатия кнопки формы.

Я, наконец, достиг этого, поставив обработчик события jquery click внутри события функции 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
  });
});

Затем я добавляю дополнительные данные в отдельное событие функции "при отправке" (возможно, это можно сделать в приведенном выше коде, но, как мне кажется, шаги ребенка).

Кажется, это работает как шарм.

Ответ 4

Здесь, как я реализую задержку загрузки (инициируется нажатием любой кнопки, например):

Реализация 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;
    }
});

Где-то в другом месте

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

Мы переопределяем функции accept и removedFile. В функции accept мы собираем объекты file и done функции в dict, где ключ file, а значение - done. Позже, когда мы будем готовы загружать добавленные файлы, мы повторяем все done функции для всех файлов в dict addedFilesHash, которые запускают процесс загрузки с индикатором выполнения и т.д.

Ответ 5

Хотя на это был дан ответ, я столкнулся с ситуацией, когда я только хотел отправить очередь, если бы это был определенный тип файла. Ошибка, с которой я столкнулся, это игнорирование 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));

Мне пришлось использовать setTimeout, увиденное выше, потому что processQueue ничего не сделал, если я не отложил его таким образом.