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 <input type="file">
element in HTML. I have a feeling it's impossible, but I'd like to know if there is a solution. I'd like to keep solely to HTML and JavaScript; no Flash please.
Html – Limit file format when using
filehtmltypes
Related Topic
- Javascript – Using HTML5/JavaScript to generate and save a file
- Javascript – HTML File Selection Event
- Html – ny way to change input type=”date” format
- Javascript – How to trigger a file download when clicking an HTML button or JavaScript
- Javascript – How tomplement DOM Data Binding in JavaScript
- Html – float input type in HTML5
Best Answer
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,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:
[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:
W3C recommends authors to specify both MIME-types and corresponding extensions in the
accept
attribute. So, the best approach is:JSFiddle of the same: here.
Reference: List of MIME-types
IMPORTANT: Using the
accept
attribute only provides a way of filtering in the files of types that are of interest. Browsers still allow users to choose files of any type. Additional (client-side) checks should be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server, using a combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). You might also want to refer to these tables for file types and their magic numbers, to perform a more robust server-side verification.Here are three good reads on file-uploads and security.
EDIT: Maybe file type verification using its binary signature can also be done on client side using JavaScript (rather than just by looking at the extension) using HTML5 File API, but still, the file must be verified on the server, because a malicious user will still be able to upload files by making a custom HTTP request.