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