[BUG] isDragAccept and isDragReject won't work on Safari

[habovh]

Describe the bug On Safari (tested with 16.2 on desktop), both isDragAccept and isDragReject boolean flags won't work and will always remain false. On the other hand, isDragActive works as intended.

Same code works on Chrome to provide visual feedback to the user when dragging is valid or invalid. Is this a known issue? Safari limitation?

To Reproduce Minimal repro code:

export const Dropzone = (props: Props) => {
  const { getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject } = useDropzone({
    onDropAccepted: props.onChange,
    accept: { 'image/*': [] },
  })
  return (
    <div
      {...getRootProps()}
      className={cn(
        styles.wrapper,
        {
          [styles.dragging]: isDragAccept,
          [styles.rejecting]: isDragReject,
        },
      )}
    >
      <input {...getInputProps()} />
      <p>
        {!isDragActive && 'You can also drag and drop here'}
        {isDragAccept && "Drop it like it's hot"}
        {isDragReject && "One of these won't work" }
      </p>
    </div>
  )
}

Expected behavior isDragAccept and isDragReject should update according to currently dragging state.

Screenshots

Browser	State	Screenshot
Both	Resting
Chrome	Accept
Chrome	Reject
Safari	Accept
Safari	Reject

As you can see, the text line is empty because the !isDragActive condition is correctly handled, but neither the accept or reject flags updated.

Desktop (please complete the following information):

• OS: macOS
• Browser: Safari
• Version: 16.2

[develth]

Also recognized that in current Firefox on mac

[PunkFleet]

Same problem, it doesn't work on my mac os in Safari, duckduckgo. According to https://react-dropzone.js.org/#section-accepting-specific-file-types I had guessed that this might be caused by not being able to match file suffixes or types correctly, but when I include all file types it still doesn't work. Now I don't know what to do.

[PunkFleet]

Not any update?

[jeffjvick]

We are having the same issue. Works fine on Chrome, Firefox and Edge (all on a Mac), but not Safari 16.4.

The same issue as @habovh. When you drag the file in Safari both isDragAccept and isDragRejected are false causing the interface to essentially go blank. Everything works fine regarding uploading but the UI jumps all over the place as it's in an "impossible" state (both not accepted or rejected).

Has anyone achieved a work around other than check for the case of both false and assume that means isDragAccept should be true? Scratch that, you can't check if both are false as even if you drag a file that should be rejected it isDragReject is still false. This does fix the UI from freaking out but if you drag a rejected file essentially nothing happens and the user doesn't know why.

[jeffjvick]

Looking further into the docs I see that this is a known issue with different browser implementations of the HTML5 File API and not an issue with this codebase per say.

Browser limitations Because of HTML5 File API differences across different browsers during the drag, Dropzone might not be able to detect whether the files are accepted or rejected in Safari nor IE.

We will probably need to remove the Accept/Reject status while the drag is active and just display a status after the drag.

[rolandjitsu]

@jeffjvick thanks for the quote. That is correct, the behaviour may be different in every browser, and Safari is known to have some issues with file data during drag.

I don't think there's much we can do about it.