CODEWITHSUNDEEP
javascriptreactjsinputinput-type-file
Samat Zhetibaev
Samat Zhetibaev

Reputation: 600

React: 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:

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.

Upvotes: 3

Views: 2609

Answers (2)

Fiodorov Andrei
Fiodorov Andrei

Reputation: 2028

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:

Edit kind-jennings-t8947

Upvotes: 2

Faizal Hussain
Faizal Hussain

Reputation: 1581

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

Upvotes: 2

Related Questions