react-dropzone 不适用于 Ubuntu 和 Google Chrome答案

【问题标题】：react-dropzone not working with Ubuntu and Google Chromereact-dropzone 不适用于 Ubuntu 和 Google Chrome
【发布时间】：2022-08-05 20:45:19
【问题描述】：

我已经使用react-dropzone 实现了一个文件拖放组件，如下所示：

import React, { useCallback } from \'react\'
import { useDropzone } from \'react-dropzone\'

function FileDragAndDrop(): JSX.Element {
  const onDrop = useCallback((acceptedFiles: File[]) => {
    console.log(acceptedFiles)
  }, [])

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
  })

  const getClassName = (className: any, isActive: any): any => {
    if (!isActive) return className
    return `${className} ${className}-active`
  }

  return (
    <div
      className={`${getClassName(\'dropzone\', isDragActive)}  h-full`}
      {...getRootProps()}
    >
      <input className=\"dropzone-input \" {...getInputProps()} />
      <div className=\"text-center h-full\">
        {isDragActive ? (
          <p className=\"dropzone-content\">Release to drop the files here</p>
        ) : (
          <p className=\"dropzone-content\">
            Drag and drop some files here, or click to select files
          </p>
        )}
      </div>
    </div>
  )
}

export default FileDragAndDrop

将 Windows 11 与 Google Chrome 版本 103.0.5060.134 一起使用，一切正常。不幸的是，对于 Ubuntu 21.10 和 Google Chrome 版本 103.0.5060.134，它无法正常工作。这里的问题仅在于 dropzone，因为通过输入上传有效。

目前，我只用谷歌浏览器尝试过这个，但如果我能获得更多信息，我会尝试不同的浏览器并更新这个问题。

编辑：Ubuntu 和 Firefox 103 工作。 Ubuntu 和 Brave 1.41.100 不工作。

有人可以给我一个提示如何解决这个导致我已经挣扎了好几天的问题。

标签： reactjs google-chrome ubuntu react-dropzone

【解决方案1】：

我只在 Ubuntu 22.04 和 Chrome 103 上遇到了同样的问题，但它只发生在我在 useDropzone({option}) 挂钩中有 accept 选项时。关闭的github issue 提到了同样的问题，并通过添加选项useFsAccessApi: false 解决了这个问题，也许它会解决您的问题。

【讨论】：