Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-dnd interferes with drag/drop uploads #457

Closed
ffxsam opened this issue May 12, 2016 · 26 comments
Closed

react-dnd interferes with drag/drop uploads #457

ffxsam opened this issue May 12, 2016 · 26 comments
Labels

Comments

@ffxsam
Copy link

@ffxsam ffxsam commented May 12, 2016

I've got a custom-built dropzone component where a user can drag/drop files onto it to upload them. Unfortunately, react-dnd is interfering with it. Sometimes dragging files onto the dropzone works, other times, nothing happens (onDrop is not fired). Any suggestions?

@hakunin
Copy link

@hakunin hakunin commented May 23, 2016

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.

@ffxsam
Copy link
Author

@ffxsam ffxsam commented May 30, 2016

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?

@kesne kesne added the triage label Aug 20, 2016
@kesne
Copy link
Collaborator

@kesne kesne commented Aug 20, 2016

@ffxsam Is this still an issue for you?

@kesne kesne added needs info and removed triage labels Aug 20, 2016
@ffxsam
Copy link
Author

@ffxsam ffxsam commented Aug 20, 2016

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.

@xavibonell
Copy link

@xavibonell xavibonell commented Sep 7, 2016

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.

@brandexponents
Copy link

@brandexponents brandexponents commented Oct 19, 2016

@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.

@kesne kesne added bug and removed needs info labels Oct 19, 2016
@kesne
Copy link
Collaborator

@kesne kesne commented Oct 19, 2016

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.

@brandexponents
Copy link

@brandexponents brandexponents commented Oct 19, 2016

@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 ?

@kn0ll
Copy link

@kn0ll kn0ll commented Dec 23, 2016

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 react-dnd/react-dnd-html5-backend#25

@silvainSayduck
Copy link

@silvainSayduck silvainSayduck commented Jan 9, 2019

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.

silvainSayduck added a commit to silvainSayduck/react-dnd that referenced this issue Jan 9, 2019
This fixes interference with drop events of native drag-n-drop (for example for file uploads with Dropzone). See react-dnd#457 (comment)
@VividWombat
Copy link

@VividWombat VividWombat commented Feb 10, 2019

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

@vileppanen
Copy link

@vileppanen vileppanen commented Feb 21, 2019

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?

@VividWombat
Copy link

@VividWombat VividWombat commented Feb 22, 2019

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

@janpe
Copy link

@janpe janpe commented Mar 6, 2019

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

@silvainSayduck
Copy link

@silvainSayduck silvainSayduck commented Mar 6, 2019

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

@janpe
Copy link

@janpe janpe commented Mar 6, 2019

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

@darthtrevino
Copy link
Member

@darthtrevino darthtrevino commented Mar 6, 2019

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

@darthtrevino
Copy link
Member

@darthtrevino darthtrevino commented Mar 6, 2019

Merged in #1240

@silvainSayduck
Copy link

@silvainSayduck silvainSayduck commented Mar 6, 2019

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

@darthtrevino
Copy link
Member

@darthtrevino darthtrevino commented Mar 6, 2019

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.

@yspanchal
Copy link

@yspanchal yspanchal commented Mar 19, 2019

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

@darthtrevino
Copy link
Member

@darthtrevino darthtrevino commented Mar 19, 2019

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

@yspanchal
Copy link

@yspanchal yspanchal commented Mar 19, 2019

@darthtrevino thank you, it is available.

@nabilfm
Copy link

@nabilfm nabilfm commented Apr 11, 2019

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

@iamparnab
Copy link

@iamparnab iamparnab commented May 12, 2019

This thread saved my life

@paolavness
Copy link

@paolavness paolavness commented Apr 14, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet