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. The code I have usese react-dropzone (https://react-dropzone.js.org/) and was made to just take drag&drops of image files. The product owner for the project I'm working on now wants it to accept all files (*.pdf's, *.docx, *.xlsx, etc.).
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? Is it as simple as setting the accept="..."
from accept="image/*"
to accept="*/*"
? can the string for accept="..."
be an array, like: accept=["image/*","text/*",...]
, etc.? what is the correct way to get react-dropzone to accept any file type?
Here is the code for my onDrop
callback —
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 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>
You can just use like with regular input
, so you can do multiple file types like: image/*,.pdf
.
Reference here.