DropZone Does not pick up CSV files on Windows 10 and ChromeOS with MIME "text/csv" filter set

Question

When running, testing, and debugging on Linux and macOS - the standard browser file pickers are happy to accept the MIME type "text/csv" to filter for CSV files to upload with DropZone.

Windows 10 (even with Chrome), and ChromeOS (Chrome as well of course) are not happy with this whatsoever.

score 7 · Answer 1 · answered Dec 06 '19 at 19:53

7

Windows recognizes .csv files as a different type, so change your accept string to the following:

accept=".csv, application/vnd.ms-excel, text/csv"

Hope this helps!

answered Dec 06 '19 at 19:53

Niloo Garavi

91
1
3

3

I used ```acceptedFiles={[".csv, text/csv, application/vnd.ms-excel, application/csv, text/x-csv, application/x-csv, text/comma-separated-values, text/x-comma-separated-values"]}``` the above did not work for me. – user1767752 May 26 '20 at 15:37

score 6 · Accepted Answer · answered Jan 04 '19 at 22:52

Instead of using a MIME filter like below:

<Dropzone
            accept="text/csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >

Use a file extension filter instead:

<Dropzone
            accept=".csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >

This code is pulled directly from the 'Accept' sample located at: https://react-dropzone.js.org/

Full working modified sample:

class Accept extends React.Component {
  constructor() {
    super()
    this.state = {
      accepted: [],
      rejected: []
    }
  }

  render() {
    return (
      <section>
        <div className="dropzone">
          <Dropzone
            accept=".csv"
            onDrop={(accepted, rejected) => { this.setState({ accepted, rejected }); }}
          >
            {({ getRootProps, getInputProps }) => (
              <div {...getRootProps()}  className="dropzone">
                <input {...getInputProps()} />
                <p>Try dropping some files here, or click to select files to upload.</p>
                <p>Only *.jpeg and *.png images will be accepted</p>
              </div>
            )}
          </Dropzone>
        </div>
        <aside>
          <h4>Accepted files</h4>
          <ul>
            {
              this.state.accepted.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
          <h4>Rejected files</h4>
          <ul>
            {
              this.state.rejected.map(f => <li key={f.name}>{f.name} - {f.size} bytes</li>)
            }
          </ul>
        </aside>
      </section>
    );
  }
}

<Accept />

.csv in the accept still triggers the isDragReject prop, but it accepts the file on drop. So onHover, it would show red, but onDrop, it would accept it — foreverAnIntern, Nov 16 '20 at 05:48

score 3 · Answer 3 · answered Jun 22 '22 at 10:13

3

If you use only useDropzone:

const { getRootProps, getInputProps } = useDropzone({
  onDrop,
  accept: { "text/csv": [".csv"] },
});

It works on Win10, but I haven't tested on Mac

answered Jun 22 '22 at 10:13

keemor

1,149
15
16

DropZone Does not pick up CSV files on Windows 10 and ChromeOS with MIME "text/csv" filter set

3 Answers3