[英]Getting react-dropzone to accept *all* files
我在 AWS EC2 实例服务器上继承了前端的 React.JS 和后端的 Node.JS/Express.JS 的代码库。 我使用的代码使用 react-dropzone ( https://react-dropzone.js.org/ ) 并且只用于拖放图像文件。 我正在处理的项目的产品所有者现在希望它接受所有文件(*.pdf、*.docx、*.xlsx 等)。
我想知道如何让它接受所有文件? 我已经浏览了 react-dropzone 文档,但我还没有找到任何示例来展示如何让它接受所有文件类型? 是否像将accept="..."
从accept="image/*"
为accept="*/*"
? accept="..."
的字符串可以是一个数组,例如: accept=["image/*","text/*",...]
等吗? 让 react-dropzone 接受任何文件类型的正确方法是什么?
这是我的onDrop
回调的代码 —
onDrop = (acceptedFiles, rejectedFiles) => {
let files = acceptedFiles.map(async file => {
let data = new FormData();
data.append("file", file);
let item = await axios
.post("triage/upload", data, {
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => {
return Object.assign(file, {
preview: URL.createObjectURL(file),
filename: response.data.filename
});
})
.catch(err => {
let rejects = rejectedFiles.map(async file => {
let data = new FormData();
await data.append("file", file);
console.log("There was an error while attempting to add your files:", err);
console.log("The files that were rejected were:\n", rejects.join('\n'))
})
});
return item;
});
Promise.all(files)
.then(completed => {
console.log("completed", completed);
let fileNames = completed.map(function(item) {
return item["filename"];
});
this.setState({ files: completed, fileNames: fileNames });
})
.catch(err => {
console.log('DROPZONE ERROR:', err);
});
};
...这是同一文件中<DropZone>
本身的代码-
<Dropzone accept="image/*" onDrop={this.onDrop}>
{({ getRootProps, getInputProps, isDragActive }) => {
return (
<div
{...getRootProps()}
className={classNames("dropzone", {
"dropzone--isActive": isDragActive
})}
>
<input {...getInputProps()} />
{isDragActive ? (
<div>
<div className="centered">
<Icon name="cloud upload" size="big" />
</div>
<div className="centered">Drop Files Here.</div>
<div className="centered">
<Button className="drop-button">
Or Click to Select
</Button>
</div>
</div>
) : (
<div>
<div className="centered">
<Icon name="cloud upload" size="big" />
</div>
<div className="centered">
Drag and Drop Supporting Files here to
Upload.
</div>
<div className="centered">
<Button className="drop-button">
Or Click to Select
</Button>
</div>
</div>
)}
</div>
);
}}
</Dropzone>
您可以将 like 与常规input
一起使用,因此您可以执行多种文件类型,例如: image/*,.pdf
。
参考这里。
我有这个完全相同的问题。
react-dropzone
使用attr-accept
来处理接受文件。 让我们看一下后者的源代码。
* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
* @param acceptedFiles {string}
* @returns {boolean}
...
export default function(file, acceptedFiles) {
if (file && acceptedFiles) {
...
}
return true
}
要获得true
的返回值,只需输入一个假字符串值,即''
只需从<Dropzone />
删除accept
道具,它将允许任何文件类型。
如果你使用useDropZone,那么它会是这样的
const {inputProps,...rest }=useDropZone({
onDrop,//onDrop function
acceptFiles:'image/png' //<--- here you provide input related info
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.