如何从单独的函数调用 dropzone processQueue()？

Question

我的表单包含 dropzone.js 并使用 jQuery 插件验证 formvalidation.io。

独立地，文件上传和验证元素按预期工作，但是我需要在 Dropzone 上传任何文件之前对运行进行表单验证。

我正在尝试

配置 autoProcessQueue: false 配置 Dropzone 以防止文件自动上传
- 从表单验证 onSuccess 回调中手动调用 Dropzone processQueue()

所有尝试都失败了。看来，以我有限的 javascript 知识，我无法从另一个函数中访问 Dropzone？

我确定答案在 Dropzone 问题 jQuery instancing: Accessing Dropzone object #180 的评论中，但我不知道如何实现在这里讨论。 https://github.com/enyo/dropzone/issues/180

下面的代码有注释，显示了我尝试调用 processQueue() 以及每次调用的结果。

谁能告诉我如何正确调用 processQueue()？

Dropzone 脚本

Dropzone.autoDiscover = false;

// Get the template HTML and remove it from the document
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone('#drop-target', { // define specific dropzone target
  url: "/processors/form-upload-files.html", // Set the url
  previewTemplate: previewTemplate,
  autoQueue: false, // Make sure the files aren't queued until manually enqueued
  previewsContainer: "#previews", // Define the container to display the previews
  clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.

  autoProcessQueue: false, // when ready to send files call myDropzone.processQueue()
  uploadMultiple: true,

  init: function() {

    // removed for ease of reading as not relevant to the problem

  } 

});

Formvalidation 脚本 - 下面的代码包含显示我尝试调用 processQueue() 的注释以及每个

的结果

$(function() {
  FormValidation.formValidation(
      document.getElementById('fm-contact'), {
        fields: {
          user_name: {
            validators: {
              notEmpty: {
                message: 'What should we call you?'
              }
            }
          } /* other validators removed for ease of reading */
            }
          }

        },
      }
    )

    /* form is valid, trigger dropzone processQueue() */
    .on('core.form.valid', function() {

      // call dropzone to upload files and data

      // figure if files are queued
    // console.log( myDropzone.getQueuedFiles() ) // returns empty array

    /* console log is empty
    var myDropzone = Dropzone.forElement("#drop-target");
    console.log( myDropzone ) 
    myDropzone.processQueue();
    */

    /* does not process queue, no errors
    $('#drop-target')[0].dropzone.processQueue();
    */

    /* Error: Dropzone already attached. - even with Dropzone.autoDiscover = false; outside of jquery ready function 
    var dropzone1 = new Dropzone("#drop-target", { autoProcessQueue: false, uploadMultiple: true});
    dropzone1.processQueue();
    */

    /* TypeError: dropzone is undefined
    var dropzone = $(this).get(0).dropzone;
    dropzone.processQueue();
    */

    /* does not process queue, no errors
    var dzone = document.querySelector("#drop-target").dropzone;
    dzone.processQueue();
    */


    /* does not process queue, no errors
    Dropzone.forElement("#drop-target").processQueue();
    */

    /* does not process queue, no errors
    var myDropzone = Dropzone.forElement("div#drop-target");
    myDropzone.processQueue();
    */


    /* ReferenceError: options is not defined 
    var drop = $("#drop-target").dropzone({ autoProcessQueue: false, uploadMultiple: true}).get(0).dropzone;
    drop.processQueue();
    */

    /* does not process queue, no errors
    $('#drop-target').get(0).dropzone.processQueue();
    */

    });


});

Answer 1

问题已通过正确配置 Dropzone 解决。 autoQueue: false,表示调用processQueue();时队列为空。

应该是autoQueue: true,.

本应意识到这一点，但已从 Dropzone 文档中的示例复制配置 - 第二个 Gist 的第 13 行 https://www.dropzonejs.com/bootstrap.html

正确的表单验证回调是

.on('core.form.valid', function() {
    var myDropzone = Dropzone.forElement("#drop-target");
});

感谢 63 Digital 的 Alastair 指出我的愚蠢。

如何从单独的函数调用 dropzone processQueue()？

How to call dropzone processQueue() from separate function?

jquery

dropzone.js

formvalidation.io