onDragOverClassName styles not removed when files are not dropped

[AJLemos]

Describe the bug

The onDragOverClassName applied to the <UploadDropZone> component is not removed when files are hovered over the browser, but instead of being dropped are moved back to the finder window.

This is on MacOS (I have not tested Windows yet).

To Reproduce
Steps to reproduce the behavior:

1. Drag one or more files over the drop zone created by <UploadDropZone>
2. Instead of dropping the files, move them back to the finder window

Expected behavior

The drop target styles, applied via the onDragOverClassName, should be removed.

Versions

@rpldy/upload-drop-zone: 0.18.1
@rpldy/uploady: 0.18.1

Code

Here is a codesandbox with a simplified implementation: https://codesandbox.io/s/vigorous-https-wd9web?file=/src/App.js

Here is a video showing the current behavior: https://share.getcloudapp.com/7KuQ6Rqx

I haven't debugged the drop zone code, but it looks like the event target may no longer be the drop zone when moving files back to the the finder window, here: https://github.com/rpldy/react-uploady/blob/master/packages/ui/upload-drop-zone/src/UploadDropZone.js#L75

[yoavniran]

Hey @AJLemos
I think the issue here is that your indicator overlay covers the entire page.
I will look into fixing this

thanks

[yoavniran]

@AJLemos With your example (very useful), and as I suspected, I've identified the issue as having to do with the nature of showing an overlay across the d&d area.

I dont think there's a clean way for me to consistently remove the drag-over class without user-code help, and also support other use-cases and edge-cases.

So, I suggest that I'll provide an optional callback prop that you can implement in order to help the DropZone component.
Notice the shouldRemoveDragOver callback that I suggest adding:

const Example = () => {
    const indicatorRef = useRef(null);

    return <Uploady >
        <UploadDropZone 
               id="upload-drop-zone" 
               onDragOverClassName="drag-over"
               shouldRemoveDragOver={(target) => target === indicatorRef.current}
        >
            <div className="content">
                <h1>Drop files here</h1>
            </div>
            <div className="dropIndicator" aria-hidden ref={indicatorRef} />
        </UploadDropZone>
    </Uploady>;
};

What do you think?

[yoavniran]

@AJLemos released in 0.18.2 - https://react-uploady.netlify.app/docs/api/components/uploadDropZone/#shouldRemoveDragOver

[mwdiaz]

@yoavniran thanks for the quick fix! I work with AJ (he's out on vacation for a couple weeks), and I'll make time today to pull in the new version and verify that it works well for our use case.

[yoavniran]

thanks @mwdiaz
Out of curiosity, where do you guys work/use Uploady?

[mwdiaz]

@yoavniran I just applied the update and it works nicely! We work at SmugMug, and we're using Uploady as the foundation for building out a refreshed uploader UI in our newer codebase.

[yoavniran]

awesome, thanks for sharing :)
Glad to hear it works

[yoavniran]

BTW, if SmugMug wants to become an Uploady sponsor, I'd be very happy to promote it here on GH and the Uploady site.

[mwdiaz]

BTW, if SmugMug wants to become an Uploady sponsor, I'd be very happy to promote it here on GH and the Uploady site.

Thanks, the library has been awesome for us so far! I'm looking into what we can offer as far as sponsoring the project, stay tuned.