I had the opposite problem. In order to make the HTML5 backend work with dropzone, I had to do:

beginDrag(props) {
  Dropzone.instances[0].disable() 

and

endDrag(props, monitor, component) {
  Dropzone.instances[0].enable()

My dropzone is mounted to the body and you might want to play with the order of mounting it.
I think making it body-wide and then taking action based on where you drop the file could be the way to go for you if nothing else works.

I also ran into an issue where the draggable item has an <input>, and if the user select/drags inside it, it drags the item. I can probably just return false from canDrag if the input is focused, and that should do the trick.

Not sure how to address interfering with HTML drag/drop upload though. I already have it enabled on the whole layout. @gaearon, thoughts?

@ffxsam Is this still an issue for you?

I don't know. I had to uninstall it due to this issue, so I couldn't tell you if it's still an issue - sorry! You can close this issue if you want.

Hi, I just run across the same problem, I was about to open an issue but I see it's already open.
So the thing is that wherever you instantiate ReactDnD the native onDrop event stops working.
I have same use case, the whole body is a 'dropzone' always listening for a file to be dragged in, I'm just using native events for that component since is very simple functionality and comes out of the box. But on the views I have ReactDnD working, drop event doesn't get fired, and is funny cause it doesn't overwrite onDragEnter or onDragStart event.
Any clue @kesne @gaearon ? I really don't want to uninstall ReactDnD, it is the best drag and drop dependency for React by far.

@kesne @gaearon I am experiencing the same issue as @xavibonell . I am basically using React DND with Wordpress and wordpress media uploader uses native drop events for file uploads. Its onDrop callback isn't fired, only when ReactDND is used in the app. Removing Reactdnd drop targets resolves the problem. I have spent several months on the project and reactdnd is a core part of it and has been used extensively. I definitely can't afford to move to another library at this juncture. From this thread as well as similar reports in Stack Overflow, I see that this issue has been there for quite a while. Any solution to this will be much appreciated.

Yeah, it's likely that there is some bad interaction between native and custom dnd elements. I don't have a ton of time to look into the issue currently, but I'm planning on setting some time aside for this project, and this will be one of the first issues I look into.

If you're able to, it'd be super useful to get a minimal repo setup with a reproduction example so that we can try to figure out the best way to handle this.

@kesne Thanks a lot for your response and it feels good to know that you will look into this issue. I will definitely create a live example for you and post a link here at the earliest.
In the meanwhile I seem to have figured a temporary hack, haven't thoroughly tested it yet, but seems to do the trick for now. I noticed there were setup() and teardown() functions in the HTML5Backend, which were binding all the event listeners to the window element. In my case the wordpress file uploader is a modal box which occupies the whole screen and therefore no ReactDND elements could be dragged or dropped when the modal is open. So during the modal window's open event I call teardown() function on the backend's instance ( available via the DragDropManager ) and during modal's close, I call the setup() function. This seems to work fine but could you please let me know if calling teardown and setup functions again can cause any other issues with ReactDND on existing or newly rendered components ?

this is the issue: https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452

based on the code's comment, "Don't show a nice cursor", it seems like it treats e.dataTransfer.dropEffect as only a display property. but, setting dropEffect to none actually seems to prevent files from being dropped all together. worth noting that setting it to move, copy, or link works just fine. this is in Chrome 55.0.2.

we can actually replicate this outside of react-dnd all together. i've created a fiddle that isolates the issue: https://jsfiddle.net/ypr6os00/8/

the MDN article for dropEffect seems to suggest that effectAllowed is functional while dropEffect should be presentational. the fiddle speaks for itself though...

edit: this is the same issue as https://github.com/gaearon/react-dnd-html5-backend/issues/25

I can confirm that in my case, simply commenting out e.dataTransfer.dropEffect = 'none'; (at https://github.com/react-dnd/react-dnd-html5-backend/blob/85fc956c58a5d1a9fde2fca3c7fca9115a7c87df/src/HTML5Backend.js#L452) fixed my issue of react-dnd interfering with my Dropzone drop events.

For reference, I have a setup similar to the following:

<DragDropContextProvider backend={HTML5Backend}>
  <Dropzone>
    <DropTargetComponent />
    <OtherComponent>
      <DragSourceComponent1 />
      <DragSourceComponent2 />
      <DragSourceComponentN />
    </OtherComponent>
  </Dropzone>
</DragDropContextProvider>

In which DropTargetComponent = DropTarget(TYPE, target, collect)(Component) and DragSourceComponent = DragSource(TYPE, source, collect)(Component).

Is there any known side effects of this patching or better fix available? Otherwise, this could maybe be merged in for good?

Thanks for all the great work, and thanks @kn0ll for figuring out a workaround.

[EDIT]
I made a Github fork and an npm package until this issue is resolved in the main project, if that's of use to anyone.

thanks for the workaround

I found t hat using the react-dropzone example for nested dropzones worked. it stops propagation, which I assume is the problem. that was my workaround until I found this issue today

I'm experiencing this same issue. Given the idea of the nested dropzones, I ended up wrapping my whatever-uploading-component inside a div and added onDragOver property to that div, which just stops the propagation. This seemed to got it working in my case, here's the example (I was using Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

However, don't like the idea that react-dnd could interfere this much on the d&d functionality on other components. It seems like a huge mishap, where some component using react-dnd to d&d DOM-nodes can break d&d file dropping functionality in another component. +1 for fixing this in the library

Maybe some quick solution could be, that the dropEffect could be specified somehow through some prop chain?

I ended up using @silvainSayduck fork for the HTML5 backend. it works for me. pity this bug isnt fixed in react-dnd directly, but at least there's a workaround

Any chance of there being a fix for this soon? @silvainSayduck could you maybe open a pull request for your fix?

I created a pull request from my repo, not sure this is of much help (as I still have no idea if commenting out that one line has any undesired side effects, or even if it fixes the issue for all use cases).

1239

@darthtrevino would you mind chiming in as a contributor to this project?

Taking a look at the PR, it looks reasonable I'll just need to verify that it doesn't screw with the examples

Merged in #1240

Thanks a lot @darthtrevino! When is this going to be released in the npm version?

By the end of the day - when I get time for this project, my usual workflow is to work through a batch of PRs and then cut a release.

@darthtrevino is it available in current release ? when it is going to available ?

I believe it's in the current release, yeah. Let me know if you run into problems

@darthtrevino thank you, it is available.

I'm experiencing this same issue. Given the idea of the nested dropzones, I ended up wrapping my whatever-uploading-component inside a div and added onDragOver property to that div, which just stops the propagation. This seemed to got it working in my case, here's the example (I was using Filepond):

 handleDragOver (event) {
    console.log('dragged over ', event.dataTransfer)
    event.stopPropagation()
  }

  render () {
    return (
      <div onDragOver={this.handleDragOver}>
        <FilePond />
      </div>
    )
  }

However, don't like the idea that react-dnd could interfere this much on the d&d functionality on other components. It seems like a huge mishap, where some component using react-dnd to d&d DOM-nodes can break d&d file dropping functionality in another component. +1 for fixing this in the library

Maybe some quick solution could be, that the dropEffect could be specified somehow through some prop chain?

add event.stopPropagation() on handleDragOver [Dropzone] fixes the issue in my case. thank you @vileppanen

This thread saved my life

For those experiencing this issue where <Dropzone /> is inside a react-dnd component, the same solution works - wrapping <Dropzone /> in a <div onDragOver={e=> e.stopPropagation() /> with onDragOver used to stop propagation.