18

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"/>

Improve this question
6
  • 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 for more info. Commented Nov 26, 2015 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). Commented Nov 26, 2015 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 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. Commented Nov 26, 2015 at 19:12
  • Both work for me, Windows 7, Firefox 42 and 44. Commented Dec 2, 2015 at 11:31
  • You have a good and detailed answer on this post : html-input-file-accept-attribute-file-type +1 if it helps^^ Commented Dec 3, 2015 at 12:39

4 Answers 4

Reset to default
13
+50

Transfer them both mime-type and extension

<input type="file" name="file2" accept="text/csv, .csv"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

nice answer. accept="text/csv, .csv" compatible with windows chrome browser as well
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.

Improve this answer

6 Comments

This is not an answer.
why not? He asked for an solution to validate files
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.
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
@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.
|
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.

Improve this answer

4 Comments

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 BTW use jQuery for what it was build Extenibillity there is a perfectly good plugin that does exactly as you require here: 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.
@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.
Looks like I need to make a correction to my first comment. According to the spec, "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.
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.