17

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). 

Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>
Community
  • 1
  • 1
ccjmne
  • 7,914
  • 3
  • 41
  • 56
  • Looks like most of the major browsers now implement this feature correctly. I tested both of your buttons in Chrome 36, Firefox 42, and Internet Explorer 11, and they worked correctly in all of them. Look **[here](http://caniuse.com/#feat=input-file-accept)** for more info. – DoctorDestructo Nov 26 '15 at 18:23
  • Mmmh I guess I should have mentionned I'm using a Linux system (with Ubuntu). Although, my client also mentionned that Firefox *does* filter out `.xls` files in both versions, using an up-to-date FF on a Windows 10 environment (have no data on Chrome though). – ccjmne Nov 26 '15 at 18:33
  • I tested on Win 7 and Vista. Unfortunately, my Win 10 box only has IE11 and Edge (don't want to put others on it yet). Interestingly, the filters don't seem to work in Edge, despite what the [caniuse](http://caniuse.com/#feat=input-file-accept) page says. They work fine in IE11, though, regardless of OS. I did notice that the first button only seems to work if the MIME types are registered. – DoctorDestructo Nov 26 '15 at 19:12
  • Both work for me, Windows 7, Firefox 42 and 44. – Kaspar Lee Dec 02 '15 at 11:31
  • You have a good and detailed answer on this post : [html-input-file-accept-attribute-file-type](http://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv) +1 if it helps^^ – Vincent Teyssier Dec 03 '15 at 12:39
  • Potential duplicate of https://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful – Christophe Roussy Sep 25 '18 at 12:26

4 Answers4

12

Transfer them both mime-type and extension

<input type="file" name="file2" accept="text/csv, .csv"/>
cetver
  • 7,930
  • 5
  • 31
  • 50
1

DISCLAIMER: This is not an answer by any means, but merely a note to the potential other readers trying to use this attribute in a wrong way.

On this non-official W3C reference of the accept attribute, you can find the following:

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

It´s not recommended to use this attribute for validation, because the users could somehow work around it and not all browsers behave the same.

ccjmne
  • 7,914
  • 3
  • 41
  • 56
Martin Godzina
  • 907
  • 7
  • 16
  • This is not an answer. – ccjmne Dec 03 '15 at 18:06
  • why not? He asked for an solution to validate files – Martin Godzina Dec 03 '15 at 18:23
  • There's no mention of any **validation** whatsoever in the question, which clearly states that I'm looking for a way to consistently **suggest** files according as their type or extension, within the file system browsing window. – ccjmne Dec 03 '15 at 18:32
  • As i told in my answer its not recommended using the Html file picker to "filter", "suggest" files or whatever. What your looking for is a "validation" only files with an explicit extansion should pass the logic thats what i try to mention in my answer – Martin Godzina Dec 03 '15 at 18:41
  • 1
    @MartinGodzina Your W3C quote says `File uploads should be validated on the server.` Your code runs on the client. Also, for real file validation, you'd want to look at more than just the extension, which is really just part of the name. – DoctorDestructo Dec 03 '15 at 22:04
  • Note that w3schools isn't actually affiliated with W3C... ["The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C."](https://www.w3schools.com/about/) – Erick Mar 16 '17 at 19:01
0

First: have you definitely got an html5 doctype?

<!DOCTYPE html>

Cause if you haven't, it might not work in some places.

Second: instead of using html you could use javascript or jquery. See this question / answer: jquery - Check for file extension before uploading

Third: In my experience, some html5 stuff just doesn't work sometimes. I've no clue why but it becomes necessary to get around problems by using jquery, for example.

You should always do a server side validation anyway to make sure that what the user is uploading is in fact what you have limited it to.

Community
  • 1
  • 1
Jacbey
  • 61
  • 1
  • 6
  • 2
    I don't disagree with anything you said, but unfortunately, there is no jquery solution that provides the same functionality as the `accept` attribute. Hopefully, most devs realize that `accept` isn't actually supposed to limit what files the user can select. What it *is* supposed to do is make it easier for the user to find files of the specified type(s) by applying an optional filter to the file selector interface. – DoctorDestructo Nov 30 '15 at 21:36
  • @DoctorDestructo BTW use jQuery for what it was build Extenibillity there is a perfectly good plugin that does exactly as you require here: https://blueimp.github.io/jQuery-File-Upload/ all i did was google "jQuery file upload plugin" and got it. i ave used it for exactly what your wanting. – Barkermn01 Dec 03 '15 at 14:11
  • @MartinBarker Your jQuery widget doesn't do what the `accept` attribute does (i.e. add a file type filter to the file selector dialog). It does block unapproved file types *after* they're selected, which is also a good thing to do, but isn't really a substitute for `accept's` functionality. – DoctorDestructo Dec 03 '15 at 21:43
  • Looks like I need to make a correction to my first comment. According to [the spec](https://html.spec.whatwg.org/multipage/forms.html#attr-input-accept), "user agents should prevent the user from selecting files that are not accepted..." So, that's how `accept` is *supposed* to work, but no browser actually implements it that way. In every one I've tested, the user can disable the filter or just type in the file name to select whatever type of file they want. – DoctorDestructo Dec 04 '15 at 00:12
0

Remove space in

accept=".xls, .xlsx"

to

accept=".xls,.xlsx"

Works in Chrome 69 and Firefox 61. Haven't tested it on Safari, IE and Edge yet.

st0at
  • 29
  • 3