Developers will not be able to prevent the user from choosing files of any type or extension in the native OS file select dialog box. But the accept attribute of <input type = "file"> can be helpful to provide a filter in the file select dialog box of the OS.
As for example:
<!-- (IE 10+, Edge, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />
It'll provide a way to filter out files other than .xls or .xlsx. This will work in IE 10+, Edge, and Chrome. Hence, for supporting Firefox older than 42 along with IE 10+, Edge, Chrome, and Opera, I think it's better to use a comma-separated list of MIME-types this way:
<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
[Edge 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 try using asterisks in MIME-types. As 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 -->
According to W3C both MIME-types and corresponding extensions in the accept attribute should be specified. Therefore the better approach is:
<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" />
For more information, you can refer to List of MIME-types
Note 1: If you are using the accept attribute, it'll only provide a way of filtering in the files of types that are of interest. Browsers will allow users to choose files of any type. Additionally, (client-side) checks must be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server by using the combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). To perform a more robust server-side verification, you may need to refer to these tables for file types and their magic numbers.
Note 2: File type verification can be done by using its binary signature. It can also be done on the client side using JavaScript (rather than just by looking at the extension) and by using HTML5 File API. But, the file must be verified on the server, because a malicious user will be able to upload files by making a custom HTTP request.
Back