React: input type "file" ignores `accept` property when you upload files using drag and drop

Question

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.

Answer 1

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