react-dropzone: IsDragReject evaluating to true even though no error were fired.

Do you want to request a feature or report a bug?

[ X] I found a bug
I want to propose a feature

What is the current behavior? Able to drop image but getting isDragReject true which leds to unexpected UI error treatments https://codesandbox.io/s/wandering-tdd-ehs4e

What is the expected behavior? Be able to drop an image and do not get isDragReject with truthy value.

If this is a feature request, what is motivation or use case for changing the behavior? After investigation, I realized that this behavior was inserted by #878.

On this method

export function fileMatchSize(file, maxSize, minSize) { return file.size <= maxSize && file.size >= minSize; }

file.size is undefined which leads to a falsy evaluation, and this file param is a DataTransferItem defined in here: DataTransferItem , having only two read-only props, kind and type, maybe we should use getAsFile method in order to have access to file itself, but on my local it returns undefined.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version. Browser Version: Chrome 77.0.3865.90 OS: Window 10 Pro React Dropzone Version: 10.1.10

Thanks, let me know if I can help somehow.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 18
Comments: 16

Commits related to this issue

fix: cover for edge cases when checking file size and close #888 — committed to rolandjitsu/react-dropzone by rolandjitsu 5 years ago

Most upvoted comments

The issue remains in the scenario if I have accept = ".txt,.doc,.docx" that is a list of comma-separated file extensions. With MIME types it works smoothly.

“react-dropzone”: “^10.2.1”, Windows 7, Chrome Version 79.0.3945.130 (Official Build) (64-bit)

+18

Popov85 on Feb 12, 2020

I’m having this same issue on accept ".jpg, .png, .svg". It fails whatever is the extension of the file.

“react-dropzone”: “^11.2.4”, macOS 11.12, Chrome 88.0.4324.146

nterol on Feb 5, 2021

I’m seeing this issue with the latest version of react-dropzone.

react-dropzone@11.5.1
Google Chrome Version 97.0.4692.71 (Official Build) (x86_64)
macOS 11.5.2

I see the issue whether I set the accept prop to an array of strings (e.g. [".p12"]) or to a string (e.g. ".p12"), where each string is a file extension (i.e. suffix) as opposed to a MIME type.

I don’t understand why this Issue is still closed.

ongopongo on Jan 14, 2022

I’m currently having this same problem. To fix it temporarily, I reverted to react-dropzone v10.1.9 and isDragReject seems to be working fine again.

ManSleen on Oct 9, 2019

Also experiencing this issue.

"react-dropzone": "^11.3.4"
Version 92.0.4515.159 (Official Build) (x86_64)
macOS 11.5.1

My code looks like this:

  const {
    acceptedFiles,
    getRootProps,
    getInputProps,
    isDragAccept,
    isDragActive,
    isDragReject,
    fileRejections,
  } = useDropzone({
    accept: "image/*,.png,.jpeg",
    maxFiles,
    maxSize,
    onDropAccepted,
  });

isDragReject is always true, even if I drag pngs or jpegs.

arcticmatt on Aug 27, 2021

I’m having this same issue on accept ".jpg, .png, .svg". It fails whatever is the extension of the file.

“react-dropzone”: “^11.2.4”, macOS 11.12, Chrome 88.0.4324.146

Having the same issue, with .rem and .ret files. Seems to me that’s doesn’t check the file extension. However i had read some issues that people was talking about being impossible to read file info until file drop into input.Tried to downgrade but still not working.

Any ideas? Hacks? Solutions?

Also .rem, .ret are mostly used in my country since they are files that banks use and request. Also again, The file it’s being imported, however the UI it’s mounted based on this variable, so will show wrong message to the user.

NicolasZim on Mar 31, 2021

🎉 This issue has been resolved in version 10.2.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

github-actions[bot] on Nov 24, 2019

The issue remains in the scenario if I have accept = ".txt,.doc,.docx" that is a list of comma-separated file extensions. With MIME types it works smoothly.

“react-dropzone”: “^10.2.1”, Windows 7, Chrome Version 79.0.3945.130 (Official Build) (64-bit)

@Popov85 @nterol @NicolasZim and others. Yes, that’s expected. As in, we can only do MIME type validation during the drag operation, file extensions will not work until dropped (due to browsers not allowing it for security reasons). Even that may not work if the extension is not a known one (see react-dropzone/file-selector/src/file.ts#L1).

The issue is closed because the original reported issue has been addressed.

rolandjitsu on Feb 2, 2022