How do I get a html5 file input to accept only certain file types consistently across browsers?

Question

According to this answer on Stack Overflow, we can set the accept attribute of an <input type="file" /> to filter accepted input, as follows:

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"

However, as you can notice running the simple snippet below, Chrome 43.0.something appears to simply disregard this configuration, while it is perfectly understood by Firefox 39.0.

I considered switching to a more blunt approach, using:

accept=".xls, .xlsx"

... which works fine in Chrome but makes Firefox somewhat confused, accepting only the files using the .xlsx extension.

---

Considering that this is probably very common and basic, I must be missing something: where am I screwing up? How do I get a html5 file input to suggest only .xls and .xlsx files consistently across browsers?

Here's a code snippet illustrating my issue (along with a JSFiddle link in case you'd wanna fiddle with it).

Answer 1

Transfer them both mime-type and extension

<input type="file" name="file2" accept="text/csv, .csv"/>