reactjscsvmimedropzone

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


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.


Solution

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