HTML file input "accept" attribute cross-browser compatibility

Question

The file input accept attribute works pretty well. However, there are some browser incompatibilities especially when you only want to select certain file types, i.e., mimetypes.

For example, if you want to only accept markdown and pdf files (see code below), webkit browsers allow one to select pdfs but ignore any markdown mimetype I can find. Whereas Firefox ignores both mimetypes and allows you to select any file type.

Does anyone know how to get webkit browsers to accept markdown files?

http://jsfiddle.net/JZ5jz/

<label for='file'>upload</label>

<input id='file' accept='application/pdf, text/x-markdown' multiple='multiple' type='file'>

Answer 1

Now you can simply use .md to filter the markdown file

<label for='file'>upload</label>

<input id='file' accept='.md' multiple='multiple' type='file'>