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.

Faizal Hussain · Accepted Answer · 2021-12-16 10:36:43Z

2

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

answered Dec 16, 2021 at 10:36

Faizal Hussain

1,5812 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fiodorov Andrei · Accepted Answer · 2021-12-16 10:51:39Z

2

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:

answered Dec 16, 2021 at 10:51

Fiodorov Andrei

2,0481 gold badge19 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related