File input 'accept' attribute - is it useful?

html filter cross-browser mime-types
Darren Oster picture Darren Oster · Oct 8, 2008 · Viewed 339.3k times · Source

Implementing a file upload under html is fairly simple, but I just noticed that there is an 'accept' attribute that can be added to the <input type="file" ...> tag.

Is this attribute useful as a way of limiting file uploads to images, etc? What is the best way to use it?

Alternatively, is there a way to limit file types, preferably in the file dialog, for an html file input tag?

Answer

0b10011 picture 0b10011 · May 8, 2012

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.

Related questions

<div> blur of part of Background image with css

I use this Is it possible to use -webkit-filter: blur(); on background-image? solution to make blurry backgroung image and it works great! But I want to make some <div> over background and make it blurry. So background should …

Read More
html canvas shape blur filter

There must be a way to do this. I have drawn a shape with the html5 canvas and I would like to blur it. As far as I know there is no native method so I assume a js library …

Read More
How to hide a background with AdBlock Plus filter

Some websites set a background image to advertise, e.g. <body style="background-image:url('images/adv.png')"> I'm wondering how I can write an AdBlock Plus filter in order to hide the <body> background.

Read More