Forms > Dropzone

Opps! You may get an error during the upload for this demo. The error will subside once the backend portion is properly configured.

My Dropzone!

Dropzone Faqs

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.


Why are large files not uploading?

There is a maxFileSize option in Dropzone which defaults to 256 (MB). Increase this to upload files bigger than that. If your files upload fine but aren't stored on the server, then it's due to your server configuration. Most servers limit the file upload size as well. Please check with the appropriate documentation.


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.


Why are some image thumbnails not generated?

There is a maxThumbnailFilesize option in Dropzone which defaults to 10 (MB) to prevent the browser from downsizing images that are too big. Increase this to create thumbnails of bigger files.


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

How to show files already stored on server

Although there's no builtin functionality to do that, you can use Dropzone's default event handlers to your advantage.

The concept is, to create a mock file, and call the event handlers addedfile and thumbnail to draw the preview. 

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

Use own confirm implementation

If you are unhappy with the way Dropzone asks a user if she wants to cancel or remove a file, and want to use some other way (e.g.: bootstrap's modal), you can simply overwrite the Dropzone.confirm function. 

// accepted and rejected are functions to be called whenever the user response
// has been received.
// rejected is not mandatory! So make sure to check if it exists before
// calling it. Do nothing if it doesn't.
Dropzone.confirm = function(question, accepted, rejected) {
  // Do your thing, ask the user for confirmation or rejection, and call
  // accepted() if the user accepts, or rejected() otherwise. Make
  // sure that rejected is actually defined!
};

How can I limit the number of files

You're in luck! Starting with 3.7.0 Dropzone supports the maxFiles option. Simply set it to the desired quantity and you're good to go. If you don't want the rejected files to be viewed, simply register for the maxfilesexceeded event, and remove the file immediately: 

myDropzone.on("maxfilesexceeded", function(file) { this.removeFile(file); });