How to call dropzone processQueue() from separate function?

My form includes dropzone.js and is validated with the jQuery plugin formvalidation.io.

Independently the file upload and validation elements work as expected however I need the form validation to run before Dropzone uploads any files.

I am trying to do this by

• configuring configure Dropzone with autoProcessQueue: false to prevent files uploading automatically
  • calling Dropzone processQueue() manually from the form validation onSuccess callback

All attempts have failed. It seems, with my limited javascript knowledge, I cannot access Dropzone from within another function?

I am sure the answer is among the comments on the Dropzone Issue jQuery instancing: Accessing Dropzone object #180 but I don't know how to implement what is discussed here. https://github.com/enyo/dropzone/issues/180

Code below has comments showing my attempts to call processQueue() along with the results of each.

Can anyone tell me how to call processQueue() correctly please?

Dropzone script

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 script - Code below includes comments showing my attempts to call processQueue() along with the results of each

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

    });


});

Issue resolved by configuring Dropzone correctly. autoQueue: false, means the queue is empty when calling processQueue();.

It should be autoQueue: true,.

Should have realised this but had copied the configuration from the example in the Dropzone docs - line 13 in the second Gist at https://www.dropzonejs.com/bootstrap.html

Correct form validation callback is

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

Thanks to Alastair at 63 Digital for pointing out my stupidity.