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?

Windowshop

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

Windowshop

You can also create dropzone programmatically, but you have to turn off autoDiscover function by Dropzone.autoDiscover = false; – Fetal

Unfortunately this solution didn't work for me, it still shows the file upload prompt twice. – Seidler

If it does not work for you (as for me) - notice label tag. See: https://mcmap.net/q/958557/-react-dropzone-opens-files-chooser-twice – Combination

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

Peatroy

You're a lifesaver! – Radiophone

And how did you prevent this from happen? What's your work around? – Barbaric

I found a way around, on initialization I now set the "clickable" property to the controls ID instead of the class. So in my case it looks like that clickable: #${controlid}, – Barbaric

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.

Pedrick

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.

Hypostasis