FAQ

This FAQ is a work in progress. Please bear with me.

---

I get the error "Dropzone already attached." when creating the Dropzone.

This is most likely due to the autoDiscover feature of Dropzone.

When Dropzone starts, it scans the whole document, and looks for elements with the dropzone class. It then creates an instance of Dropzone for every element found. If you, later on, create a Dropzone instance yourself, you'll create a second Dropzone which causes this error.

So you can either:

1. Turn off autoDiscover globally like this: Dropzone.autoDiscover = false;, or
2. Turn off autoDiscover of specific elements like this: Dropzone.options.myAwesomeDropzone = false;

How to get notified when all files finished uploading?

At the moment there isn't a single event to do that, but you can listen to the complete event, which fires every time a file completed uploading, and see if there are still files in the queue or being processed.

Dropzone.options.myDrop = {
  init: function() {
    this.on("complete", function() {
      if (this.filesQueue.length == 0 && this.filesProcessing.length == 0) {
        // File finished uploading, and there aren't any left in the queue.
      }
    });
  }
};

How to submit additional data along the file upload?

If your Dropzone element is a <form> element, all hidden input fields will automatically be submitted as POST data along with the file upload.

Example:

<form action="/" class="dropzone">
  <input type="hidden" name="additionaldata" value="1" />

  <!-- If you want control over the fallback form, just add it here: -->
  <div class="fallback"> <!-- This div will be removed if the fallback is not necessary -->
    <input type="file" name="youfilename" />
    etc...
  </div>
</form>

I want to display additional information after a file uploaded.

To use the information sent back from the server, use the success event, like this:

Dropzone.options.myDropzone = {
  init: function() {
    this.on("success", function(file, responseText) {
      // Handle the responseText here. For example, add the text to the preview element:
      file.previewTemplate.appendChild(document.createTextNode(responseText));
    });
  }
};