File Input 'Accept' Attribute - Is It Useful

File input 'accept' attribute - is it useful?

The accept attribute is incredibly useful. It is a hint to browsers to only show files that are allowed for the current input. While it can typically be overridden by users, it helps narrow down the results for users by default, so they can get exactly what they're looking for without having to sift through a hundred different file types.

Usage

Note: These examples were written based on the current specification and may not actually work in all (or any) browsers. The specification may also change in the future, which could break these examples.

h1 { font-size: 1em; margin:1em 0; }h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }
<h1>Match all image files (image/*)</h1><p><label>image/* <input type="file" accept="image/*"></label></p>
<h1>Match all video files (video/*)</h1><p><label>video/* <input type="file" accept="video/*"></label></p>
<h1>Match all audio files (audio/*)</h1><p><label>audio/* <input type="file" accept="audio/*"></label></p>
<h1>Match all image files (image/*) and files with the extension ".someext"</h1><p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<h1>Match all image files (image/*) and video files (video/*)</h1><p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

File field accept attribute not working properly when drag and drop file into it

The accept parameter is used to let the browser know it should ask the OS for a file selector dialog which would accept only these type of files.

So this is actually an OS feature.

Now, when you drag&drop a file, the browser doesn't require to open a file selector dialog, so this attribute is not used.

But you can still listen to the change event and do your checking there.

inp.onchange = function(e){  e.preventDefault();  var file = this.files[0];  if(file.type.indexOf('image/') !== 0) {    this.value = null;    console.log("invalid");  }  else {    console.log('valid file');  }}
Drop a file on this input. <br><input type="file" accepts="image/*" id="inp">

Accept attribute for input[type=file] allows other extensions

This is apparently a Mac Os only bug.

I wasn't able to reproduce it from my win10 VM, but it is still there in v.55.0.2861.0 canary.


The problem seems to come from the .txt.

It's like it will accept any text/* files, when this extension is set.

You can star this chromium issue which treats of the same underlying issue (with a different extension).

<input type="file" accept=".txt">

html accept attribute working differently on different operating systems

Could possibly be with a browser compatiablity issue make sure whatever browser your using is up to date.

Another way of doing this would be to state the file types of what you are willing to accept.

Some links that could be useful:

Safari <input type="file" accept="video/*"> ignores mp4 files

How to make <input type="file"/> accept only these types?

HTML file input — accept attribute not working

I was unable to get the accept attribute to work for mobile. Ultimately I had to add an onchange handler to the input (general idea shown below).

Keep in mind, you'll still want to use the accept attribute as shown in my question, because it will work on desktop.

const supportedExtensions = ['jpeg', 'jpg', 'png', 'gif'];

const handleChange = ({ target }) => {
const path = target.value.split('.');
const extension = `${path[path.length - 1]}`;

if (supportedExtensions.includes(extension)) {
// TODO: upload
} else {
// TODO: show "invalid file type" message to user

// reset value
target.value = '';
}
}

How to allow input type=file to accept only image files?

Use the accept attribute of the input tag. To accept only PNG's, JPEG's and GIF's you can use the following code: