Skip to content

Upload all files with a button

Jump to bottom
Matias Meno edited this page Jul 27, 2020 · 4 revisions

This tutorial shows how to let the user build a queue and then upload all files with a single button click.

First off the HTML:

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

and the 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.
    });

  }
};

That's it!

Clone this wiki locally