React-dropzone: Disabling of react-dropzone to allow custom drag n' drop operations within (plus control of the `dropEffect`)

[damon-kreft]

Firstly, great work :)

Secondly, I'm in an assets upload/management situation which is akin to any system file browser. Screeny of the initial demo...

The folder/file container is also a react-dropzone. Within the dropzone we have to manage typical file/folder drag n' drop operations for moving stuff around.

Unfortunately react-dropzone does cause us some interference. We've had to wrap it to add a disabled property so we can temporarily kill it and do our own thing...

https://gist.github.com/dimlock/0fb3982e65374d42f4cb9ba5e630c220

A little hacky, but this is currently working well, except when we try to do a move operation (e.g. file to a folder). react-dropzone is forcing an undesirable 'copy' cursor icon to appear, which is obviously inappropriate for what is actually a move operation.

It's seemingly an issue of react-dropzone killing the propagation of onDragOver event and not allowing us to take control of the dataTransfer.dropEffect

https://github.com/okonet/react-dropzone/blob/7e256d1135d1f72a3e203a87f2aa4ff4dff4a7ae/src/index.js#L71

Obviously we're hoping this issue promotes additional control over drag n' drop events within the dropzone to cater for circumstances like this.

Thanks

[okonet]

I'm not even sure this is the right choice for a custom UI like this.

What is your proposal would be? Add a callback for each of onDrag* events? I think this would be possible.

And looking at the blame e.stopPropagation(); doesn't seem to be required as far as I can say: https://github.com/okonet/react-dropzone/issues/74

Either way, if can find a good solution that doesn't break existing use-cases I'm all for extensibility here. Just file a PR and don't forget tests.

[damon-kreft]

It's the only good quality component we can find with the promising longevity a project like ours requires (based off the repo popularity and your/contributors great active maintenance). Besides... with our small modifications, it is working almost ideally.

Yeah exactly; allowing users to hook into all onDrag* events as they would any element with the additional ability to disable react-dropzone's default behaviours (essentially the same as event.preventDefault() for native browser behaviour).

I appreciate your willingness to allow the extensibility. Expressing this makes contributing a lot easier without worrying the PR and work you've done will just sit there for a lifetime (which happens a lot).

[okonet]

I assume this can be closed since now react-dropzone implements all of the onDrop* hooks.