• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

334
Views
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:

  • 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.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

almost 3 years ago · Juan Pablo Isaza Report

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:

Edit kind-jennings-t8947

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error