[英]Getting react-dropzone to accept *all* files
I have inherited a code base that is React.JS on the front-end and Node.JS/Express.JS on the back-end on an AWS EC2 instance server.我在 AWS EC2 实例服务器上继承了前端的 React.JS 和后端的 Node.JS/Express.JS 的代码库。 The code I have usese react-dropzone ( https://react-dropzone.js.org/ ) and was made to just take drag&drops of image files.
我使用的代码使用 react-dropzone ( https://react-dropzone.js.org/ ) 并且只用于拖放图像文件。 The product owner for the project I'm working on now wants it to accept all files (*.pdf's, *.docx, *.xlsx, etc.).
我正在处理的项目的产品所有者现在希望它接受所有文件(*.pdf、*.docx、*.xlsx 等)。
I'm wondering how to go about getting it to accept all files?我想知道如何让它接受所有文件? I've gone through the react-dropzone docs and I've yet to find any example to show how to get it to accept all file types?
我已经浏览了 react-dropzone 文档,但我还没有找到任何示例来展示如何让它接受所有文件类型? Is it as simple as setting the
accept="..."
from accept="image/*"
to accept="*/*"
?是否像将
accept="..."
从accept="image/*"
为accept="*/*"
? can the string for accept="..."
be an array, like: accept=["image/*","text/*",...]
, etc.? accept="..."
的字符串可以是一个数组,例如: accept=["image/*","text/*",...]
等吗? what is the correct way to get react-dropzone to accept any file type?让 react-dropzone 接受任何文件类型的正确方法是什么?
Here is the code for my onDrop
callback —这是我的
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);
});
};
...and here is the code for <DropZone>
itself in the same file — ...这是同一文件中
<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>
I had this exact same issue.我有这个完全相同的问题。
react-dropzone
uses attr-accept
to handle accepting files. react-dropzone
使用attr-accept
来处理接受文件。 Let's look at the source code for the latter.让我们看一下后者的源代码。
* @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
}
To get a return value of true
, simply input a falsy string value, ie ''
要获得
true
的返回值,只需输入一个假字符串值,即''
只需从<Dropzone />
删除accept
道具,它将允许任何文件类型。
If you use useDropZone, then it will be like this如果你使用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.