onDrop not working

[mzl-ki]

Do you want to request a feature or report a bug?

• I found a bug
• I want to propose a feature

What is the current behavior?
I'm using the example code from the documentation but the onDrop function is never called. The isDragActive, isDragAccept and isDragReject work fine. Using the file selector works too.

Code:

<Dropzone onDrop={() => alert("Dropped")}>
{({ getRootProps, getInputProps, isDragActive }) => {
    return (
    <div {...getRootProps()} className={"dropzone" + isDragActive ? " dropzone--isActive" : ""}>
        <input {...getInputProps()} />
        {isDragActive ? (
        <p>Drop files here...</p>
        ) : (
        <p>Try dropping some files here, or click to select files to upload.</p>
        )}
    </div>
    );
}}
</Dropzone>

If the current behavior is a bug, please provide the steps to reproduce.

1. Install react-dropzone
2. Include code from above
3. Drag file(s) from finder onto the dropzone
4. Drop file
5. Nothing happens, no console output

What is the expected behavior?

1. ...
2. Drop file
3. Alert is shown

Please mention other relevant information such as the browser version, Operating System and react-dropzone version.

• macOS High Sierra 10.13.4, Windows 10
• Safari 11.1, Chrome 72.0.3626.109, and Firefox 65.0
• react-dropzone 9.0.0

[darekchynek]

Have same issue, with the same version of react-dropzone and Windows 10 (Google Chrome 72.0.3626.119 ).

Open method works correctly - onDrop don't launch when You drop file.

[rolandjitsu]

Doing this on react-dropzone.js.org works just fine (the basic example shows the file you dropped).

So I'm not sure what you're experiencing. Please provide an example on codesandbox or some other tool.

[alfaslash]

@ppi-mzl are you used React DnD?

[darekchynek]

We're using React Dnd with react-sortable-tree.

[alfaslash]

@darekchynek This problem in React DND react-dnd/react-dnd#457

[mzl-ki]

@ppi-mzl are you used React DnD?

Yes we are using react-dnd and using the fork / nmp Package of @silvainSayduck instead fixes the issue.

So this is not a bug in react-dropzone but react-dnd. Maybe this should be mentioned in the documentation since this seems to be a common error.

[mzl-ki]

Wrapping the Dropzone in a ConnectDropTarget which accepts NativeTypes.FILE works also.

[ronaiza-cardoso]

I'm using "react-beautiful-dnd": "^10.0.4", and is not working. "react-dropzone": "^7.0.1",. When is on localhost works like expected but when build to prod doesn't work. I'm not using hooks.

[felipe-vicente]

In case of anyone having an issue that "looks like this one". Sometimes browsers use diferente MIME_TYPE for diferente file types. I had a problem with 'text/csv' mimetype more info, wich did not work on Chrome running on Windows. Took a while to detect the cause.

I just wanted to write it here so developers with the same problem I had won't lose time thinking it could be any more complex error. Cheers

[isahohieku]

So on my own part, the major issue was this line

<div {...getRootProps({ className: '${styles.dropZone}' })}>

I omitted the className dropzone

On changing to this

<div {...getRootProps({ className: '${styles.dropZone} dropzone' })}>,

It started Working well. Which means the class dropzone must be used and not negotiable.

Pardon my use of single quote where I needed to use a back tick