Posted By: Anonymous
I’d like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the
Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.
But still, the accept attribute of
<input type = "file"> can help to provide a filter in the file select dialog box of the OS. For example,
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) --> <input type="file" accept=".xls,.xlsx" />
should provide a way to filter out files other than .xls or .xlsx. Although the MDN page for
input element always said that it supports this, to my surprise, this didn’t work for me in Firefox until version 42. This works in IE 10+, Edge, and Chrome.
So, for supporting Firefox older than 42 along with IE 10+, Edge, Chrome, and Opera, I guess it’s better to use comma-separated list of MIME-types:
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
[Edge (EdgeHTML) behavior: The file type filter dropdown shows the file types mentioned here, but is not the default in the dropdown. The default filter is
All files (*).]
You can also use asterisks in MIME-types. For example:
<input type="file" accept="image/*" /> <!-- all image types --> <input type="file" accept="audio/*" /> <!-- all audio types --> <input type="file" accept="video/*" /> <!-- all video types -->
W3C recommends authors to specify both MIME-types and corresponding extensions in the
accept attribute. So, the best approach is:
<!-- Right approach: Use both file extensions and corresponding MIME-types. --> <!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) --> <input type="file" accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
JSFiddle of the same: here.
Reference: List of MIME-types
IMPORTANT: Using the