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
Comments
I had the opposite problem. In order to make the HTML5 backend work with dropzone, I had to do:
and
My dropzone is mounted to the body and you might want to play with the order of mounting it. |
I also ran into an issue where the draggable item has an 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. |
@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. |
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 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 edit: this is the same issue as react-dnd/react-dnd-html5-backend#25 |
I can confirm that in my case, simply commenting out For reference, I have a setup similar to the following: <DragDropContextProvider backend={HTML5Backend}>
<Dropzone>
<DropTargetComponent />
<OtherComponent>
<DragSourceComponent1 />
<DragSourceComponent2 />
<DragSourceComponentN />
</OtherComponent>
</Dropzone>
</DragDropContextProvider> In which 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] |
This fixes interference with drop events of native drag-n-drop (for example for file uploads with Dropzone). See react-dnd#457 (comment)
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):
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). |
@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. |
add |
This thread saved my life |
For those experiencing this issue where |
@paolavness thanks for this solution, works perfectly fine in my case ! |
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?The text was updated successfully, but these errors were encountered: