'react-dropzone: isDragReject is true when accept csv?

const {
  acceptedFiles,
  getRootProps,
  getInputProps,
  isDragActive,
  isDragAccept,
  isDragReject,
} = useDropzone({
  accept: ".csv",
});
console.log(isDragActive, isDragAccept, isDragReject)

When dragging a csv file, this code logs "true, false, true". But react-dropzone accepted the csv file.

I tried with images and all worked as expected.

I also tries accept: ".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values", not working.

There is an issue maybe related, but it's closed without a solution.

I'm using isDragActive, isDragAccept and isDragReject to style the components. Is there any workaround for this?

reactjs react-dropzone

Solution 1:^[1]

Per https://react-dropzone.js.org/#section-accepting-specific-file-types, with useDropzone, you have to use MIME types as the key. I used the below and it worked well for me.

accept: {
      'text/csv': [
        '.csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values',
      ],
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Zach Milan

'react-dropzone: isDragReject is true when accept csv?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]