0
108
ViewsReact: input type "file" ignores `accept` property when you upload files using drag and drop
I use <input type="file" accept=".txt" /> with accept property. I set it to accept, for example, only .txt files. And it works well if you click on input and opens the chooser and you cannot upload files that not allowed by accept.
But, when you upload files by drag & drop it uploads any files ignoring accept.
Here is an example: https://codesandbox.io/s/floral-tdd-11wt9?file=/src/App.js
To reproduce the problem:
- drag any file from you Desktop, expect
.txt - move and drop into the input
- you'll see a file name (but it should not be uploaded)
Q: What is the best way to work this around? Considering there could any fileTypes and standard file.type gives excessive information about file type.
Juan Pablo Isaza
2 answers
Answer question0
When you add the accept, the browser tells the OS to show only the files which are mentioned but the support, but when you do a drag and drop this feature is eliminated , The best way is to write a validator function that checks whether the given file is supported or not like
const handleChange = (e) => {
const newFiles = e.target.files;
const fileName = newFiles[0].name;
const extension = fileName.split(".").pop();
const isSupported = ["txt"].includes(extension);
if (!isSupported) {
alert("not supported");
setFiles(null);
e.target.value = null;
} else {
setFiles(newFiles);
}
};
here the advantage of using ["txt"].includes(extension) is that , you can add validation for multiple file types, I just reset the input with e.target.value = null;(when the file is invalid) , but you can use you own logic there
here is a working example
0
To prevent drop unaccepted files you need to add onDrop handler for input:
<input type="file" onDrop={handleDrop} accept="text/plain" {...otherProps} />
In onDrop check if dropped file type is accepted:
const handleDrop = (e) => {
const allowedTypes = new Set([e.target.accept]);
if (!allowedTypes.has(e.dataTransfer.files[0].type)) {
// stop event prepagation
e.preventDefault();
}
};
Here is a live example:
