DropZone 在 Windows 10 和带有 MIME "text/csv" 过滤器集的 ChromeOS 上不拾取 CSV 文件

Question

当运行、在 Linux 和 macOS 上进行测试和调试时 - 标准浏览器文件选择器乐于接受 MIME 类型 "text/csv" 进行过滤使用 DropZone 上传的 CSV 文件。

Windows 10（即使有 Chrome）和 ChromeOS（当然还有 Chrome）对此并不满意。

Answer 1

而不是像下面这样使用 MIME 过滤器：

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

改为使用文件扩展名过滤器：

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

此代码直接从位于 https://react-dropzone.js.org/

的 'Accept' 示例中提取

完整的工作修改示例：

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

Answer 2

Windows 将 .csv 文件识别为不同类型，因此将您的接受字符串更改为以下内容：

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

希望对您有所帮助！

DropZone 在 Windows 10 和带有 MIME "text/csv" 过滤器集的 ChromeOS 上不拾取 CSV 文件

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

csv

mime

reactjs

dropzone