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 add a button to remove to each file preview?

If you want to add a button to each file preview to remove the file, you can do so like this:

<form action="/target-url" id="my-dropzone" class="dropzone"></form>

<script>
  // myDropzone is the configuration for the element that has an id attribute
  // with the value my-dropzone (or myDropzone)
  Dropzone.options.myDropzone = {
    init: function() {
      this.on("addedfile", function(file) {

        // Create the remove button
        var removeButton = Dropzone.createElement("<button>Remove file</button>");
        

        // Capture the Dropzone instance as closure.
        var _this = this;

        // Listen to the click event
        removeButton.addEventListener("click", function(e) {
          // Make sure the button click doesn't submit the form:
          e.preventDefault();

          // Remove the file preview.
          _this.removeFile(file);
          // If you want to the delete the file on the server as well,
          // you can do the AJAX request here.
        });

        // Add the button to the file preview element.
        file.previewElement.appendChild(removeButton);
      });
    }
  };
</script>

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