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;

You don't have to create an instance of Dropzone programmatically in most situations! It's recommended to leave autoDiscover enabled, and configure your Dropzone in the init option of your configuration.

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 show an error returned by the server?

Very often you have to do some verification on the server to check if the file is actually valid. If you want Dropzone to display any error encountered on the server, all you have to do, is send back a proper HTTP status code in the range of 400 - 500.

Dropzone will then know that the file upload was invalid, and will display the returned text as error message.

In most frameworks those error codes are generated automatically when you send back an error to the client. In PHP (for example) you can set it with the header command.

How to add a button to remove each file preview?

Starting with Dropzone version 3.5.0, there is an option that will handle all this for you: addRemoveLinks. This will add an <a class="dz-remove">Remove file</a> element to the file preview that will remove the file, and it will change to Cancel upload if the file is currently being uploaded (this will trigger a confirmation dialog).

You can change those sentences with the dictRemoveFile, dictCancelUpload and dictCancelUploadConfirmation options.

If you still want to create the button yourself, 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();
          e.stopPropagation();

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