[BUG] Inconsistency: cases when `isDragReject` is true but `onDrop` later sees as accepted files

[haywirez]

When dropping in files conforming to {accept: { 'model/gltf-binary': ['.glb'] }}, I noticed that file.type ends up being an empty string but still set as accepted inside onDrop due to the file extension check. However isDragReject still reports true during the drag. Upon deeper investigation this seems to be due to the fact that the file type list is not available inside the event's dataTransfer during dragenter/dragover yet.

I'm not sure about the root cause, it seems like it happens when dragging in certain less common file MIME types, either the OS or Chrome doesn't report them... (tested on MacOS 12.5.1 / Chrome ). It also happens when dragging in folders (#977), and is mentioned in several issues (for example, #25, #276).

I would like to suggest (and offer) to implement isDragUnknown to offer better end-user feedback, in situations where the drag is ambious. What do you think?

[haywirez]

Workaround I ended up using in a HOC:

// ...
const [isDragUnknown, setIsDragUnknown] = useState(false)
// ...
onDragEnter: (e) => {
  for (const item of e.dataTransfer.items) {
    if (item.kind === 'file' && item.type === '') {
      setIsDragUnknown(true)
      return
    }
  }
  setIsDragUnknown(false)
},
onDragLeave: () => {
   setIsDragUnknown(false)
},
// ...

 const style = useMemo(
    () => ({
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {}),
      ...(isDragUnknown ? unknownStyle : {}),
    }),
    [isDragAccept, isDragReject, isDragUnknown]
  )
  return <WrappedComponent {...getRootProps()} style={style} ref={wrapperRef} {...props} />

[rolandjitsu]

@haywirez this info is stated in https://react-dropzone.js.org/#browser-limitations. Nonetheless, I think that's a good idea and I'm open to a PR.

[rolandjitsu]

Implemented isDragUnknown as you suggested in #1479.

Since a drag only exposes DataTransferItems (MIME type, no name/size), we now skip the custom validator during the drag and expose isDragUnknown instead of a misleading accept/reject. The validator runs in full on drop.

Note one residual, platform-level case we can't resolve mid-drag: a file whose OS-reported MIME type is non-empty and doesn't match accept, but whose extension would match on drop - without the filename during the drag it still shows isDragReject and then accepts on drop.

[github-actions]

🎉 This issue has been resolved in version 18.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀