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

user_584947 0
Viewed 7191

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.

dropzone reactjs csv mime
3 Answers

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!

user_109235850

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 />
user_5849470

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

user_3439000
Related