Dropzone opens file chooser twice

Question

I have set up dropzone with a clickable element. Clicking the button causes dropzone to open the file chooser twice, instead of just once, the second coming immediately after the first file has been chosen.

The init code is:

Dropzone.autoDiscover = false;

$(document).ready(function(){

// Remove the template from the document.
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

$("div#photo").dropzone({
    url: "/blackhole/",
    thumbnailWidth: 240,
    thumbnailHeight: 240,
    parallelUploads: 1,
    maxFiles:1,
    maxFilesize: 5,
    uploadMultiple: false,
    previewTemplate: previewTemplate,
    autoProcessQueue: true,
    previewsContainer: "#photoPreview", 
    clickable: ".fileinput-button",
    init: function() {
        this.on("maxfilesexceeded", function(file) {
            this.removeAllFiles();
            this.addFile(file);
        });
    }   
});

And the page elements are:

      <div class="table table-striped" class="files">

        <div id="photo">
          <div id="actions" class="row">
            <div class="col-lg-7">
              <button type="button" class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>
                <span>Choose file...</span>
              </button>
            </div>
          </div>
        </div>

        <div class="files dropzone-previews" id="photoPreview">
          <div id="template" class="file-row">
            <div>
              <span class="preview"><img data-dz-thumbnail /></span>
            </div>
            <div>
              <p class="name" data-dz-name></p>
              <strong class="error text-danger" data-dz-errormessage></strong>
            </div>
            <div>
              <p class="size" data-dz-size></p>
              <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                <div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
              </div>
            </div>
            <div>
              <button data-dz-remove type="button" class="btn btn-warning cancel">
                <i class="glyphicon glyphicon-ban-circle"></i>
                <span>Cancel</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

Strangely, even though I have added code to replace the any existing file with a later one (so only one file can be uploaded), the second file chooser dialog lets me add a second file.

Its like dropzone has been initialized twice, but I checked that it is only initialized once, and also added the autoDiscover = false option for good measure.

Can anyone spot my mistake?

Answer 1

The problem seems to be in how we initialized dropzone:

$("div#photo").dropzone({
...
}

Doing it the non-jquery way solved the problem:

var myDropZone = new Dropzone("#photo",{
...
}

This was on dropzone 3.11.1.

An issue has been created on github/dropzone: https://github.com/enyo/dropzone/issues/771

Answer 2

This happens for me when more than one dropzone exists on the page with the same class for a browse trigger, it seems that dropzone attaches the event to any element on the page and not just within its own container

Answer 3

In the issue opened for this, maliayas said:

This bug happens when your clickable element is already an input[type=file]. Dropzone injects another one and now you have two.

Either dropzone should handle this case or documentation should mention not to use an input[type=file] for the clickable element.

Changing my dropzone element to something other than an input[type=file] fixed the issue for me.

Answer 4

Attach dropzone to the parent, not the input.

In Chrome if you inspect and look at the eventListeners. You will see that once you attach dropzone to your input, you have an additional click eventListener.

Say you have a list of uploads for documents with a child input element.

<li class="upload drag-and-drop">
    <input type="file"/>
</li>

Code:

$('input').dropzone();

Will attach an event listener to an already clickable element. So you have 2 event listeners. One from the browser. One from dropzone. Hence 2 dialogs...

If you attach it to the parent:

$('li.upload').dropzone();

You'll now had the listener at the parent. This allows the bubble up behavior to hit the correct element when you drag and drop and not inadvertently effect the input.