The Current State of HTML5 Forms

The accept Attribute

<input type=file accept="image/*">

Live Demo

Firefox
11+
Safari
5.2+
Safari Mobile
7+
Chrome
10+
Opera
10.6+
IE
10+
Android
4.2-
Supported Supported Supported Supported Kinda supported Supported No support

Supported Browser Screenshots

Chrome 10
Opera 11 (Vista)

Unsupported Browser Screenshots

Firefox 4b12 (Mac)

The Low Down

The accept attribute, when fully supported, limits the file selection dialog to files with certain MIME types.

  • Types: audio/*, video/*, image/*, or other valid MIME types with no parameters.
  • When type is not supported, the fallback is that the input accepts files of any type.
  • Originally support was better on Windows and Linux, but support has improved for Macs.
  • Macs "gray out" improper selections in the file selection dialog, PCs just don't show them all together.
  • IE 9 will take the attribute but doesn't actually work.
  • Started working in Safari somewhere between 5.0.3 and 5.2
  • Older versions of iOS didn't really have an accessible file structure, so it just grayed out all file input type form controls. Support for attaching and uploading documents is now supported.
  • When clicking on a file input type in Android, the operating system offers a dialog to choose a file from the camera, microphone, gallery, file structure, or other, ignoring the value of the accept attribute. Include the following to encourage this behavior in Mobile: Android 3+, Chrome 16+, Safari 6+, Firefox 10+, Blackberry 10+:
    <input type="file" accept="audio/*;capture=microphone">
    <input type="file" accept="image/*;capture=camera">
    <input type="file" accept="video/*;capture=camcorder">