react dropzone不适用于Ubuntu和Google Chrome

Question

我已经使用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和谷歌Chrome版本103.50.60.134，一切都如预期。不幸的是，对于Ubuntu 21.10和Google Chrome版本103.05060.134，它不起作用。这里的问题只是dropzone，因为通过输入上传是有效的。

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

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

有人能给我一个提示吗？如何解决这个让我已经挣扎了好几天的问题。

Answer 1

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