Search code examples
htmlinternet-explorerinternet-explorer-11input-type-file

IE11 input type="file" accept=".xls" additional categories appear

In IE11 whenever i use accept attribute in my input, besides the usual "All files" and "Custom files(.xls) there's two additional categories appear: "Images" and "HTML". Is there a way to remove the unwanted categories?

The problem can be reproduced for me at any input with accept attribute, like in this JSFiddle: http://jsfiddle.net/sachinjoseph/BkcKQ/

IE 10+, Edge, Chrome:<br />
<label>.xls,.xlsx files</label>
<input type="file" accept=".xls,.xlsx" />
<br />
<br />
IE 10+, Edge, Chrome, Firefox:<br />
<label>.xls,.xlsx files (using MIME-types)</label>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
<br />
<br />
<h3>
Recommended way of achieving file type filter:
</h3>
IE 10+, Edge, Chrome, Firefox:<br />
<label>.xls,.xlsx files (using both extensions and MIME-types)</label>
<input type="file"
     accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
<br />
<br /> <br />
<br />
    <b>Note:</b><p>Edge allows to choose files of any type by default, even if accept attribute is set, although it adds a custom filter list to the file-select dialog box. The user must manually apply the filter from the file-select dialog box.</p>
Solution

  • IE, as it often is, is not standards compliant. The HTML standard allows for mime types as well as file extensions preceded by a full stop. By comparison, IE's spec for the accept attribute only mentions mime types. Here's what the official spec says:

    The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

    If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:

    • The string "audio/*"
      Indicates that sound files are accepted.
    • The string "video/*"
      Indicates that video files are accepted.
    • The string "image/*"
      Indicates that image files are accepted.
    • A valid MIME type with no parameters
      Indicates that files of the specified type are accepted.
    • A string whose first character is a U+002E FULL STOP character (.)
      Indicates that files with the specified file extension are accepted.

    Sources:
    - https://html.spec.whatwg.org/multipage/input.html#attr-input-accept
    - https://msdn.microsoft.com/en-us/library/ms533060%28v=vs.85%29.aspx
    - File input 'accept' attribute - is it useful?