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, ie, 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'>