react-dropzone opens files chooser twice

Question

I an encountering an issue with react-dropzone for quite a long time.

First, let's jump straight to the problem with a video: https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

The file choser window opens twice on every file inputs of my website, it is not an infinite loop, just twice.

Here is the code I use for this dropzone:

                    <Dropzone onDrop={this.onDrop.bind(this)}
                              key={this.state.key}
                              style={{border: "none"}}>
                        <div className="input-file">
                            <label for="file">
                                <button type="button">Choisissez un fichier</button>
                            </label>
                        </div>
                        <div className={"file-name " + (!this.state.selectedOption ? '' : 'hidden')}>
                            Aucun fichier choisi
                        </div>
                        <div className={"file-name " + (this.state.selectedOption ? '' : 'hidden')}>
                            {this.state.selectedOption}
                        </div>
                    </Dropzone>

The unwanted event happens every time I drop or even when I click on the input itself

If hope to give you guys enough information, if you need more I will more than happy to share code.

Resilient

Answer 1

Just stumbled upon this too, in my case this was related to Dropzone being wrapped in a label. label passes clicks to descendant inputs.

As a workaround, you can remove the parent label (or change it to div or whatever).

Or, although I do not recommend it, monkey-patch Dropzone.prototype.onInputElementClick (or subclass and override). No further instructions here, as to not facilitate people shooting their feet.

Related react-dropzone issue: https://github.com/react-dropzone/react-dropzone/issues/182.

Jaco

Thanks for this! Saved my bacon. – Yorgo

Great advice, thank you! I added preventDefault on click of label. – Arondell

I've been trying to figure this out for sooo long. Removing my label element fixed it! – Violetavioletta

Answer 2

Faced the same issue, later found a way to solve it. Just add stopPropagation to parent div onClick.

Greenish

Answer 3

This issue has been resolved in react-dropzone version 10.1.3.

I had the problem with version 10.1.0. Once I upgraded it to v10.1.3 in package.json, the problem is gone.

"dependencies": {
  "react-dropzone": "^10.1.3"
}

Rile

Answer 4

In my case, removing htmlFor parameter from the label tag solved the problem.

Jailer