How to get the HTML's input element of "file" type to only accept pdf files?

Solution 1:

To get the HTML file input form element to only accept PDFs, you can use the accept attribute in modern browsers such as Firefox 9+, Chrome 16+, Opera 11+ and IE10+ like such:

<input name="file1" type="file" accept="application/pdf">

You can string together multiple mime types with a comma.

The following string will accept JPG, PNG, GIF, PDF, and EPS files:

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

In older browsers the native OS file dialog cannot be restricted – you'd have to use Flash or a Java applet or something like that to handle the file transfer.

And of course it goes without saying that this doesn't do anything to verify the validity of the file type. You'll do that on the server-side once the file has uploaded.

A little update – with javascript and the FileReader API you could do more validation client-side before uploading huge files to your server and checking them again.

Solution 2:

Not really. See File input 'accept' attribute - is it useful? .

Solution 3:

The accept attribute value is a string that defines the file types the file input should accept. You can use the accept attribute like:

<input name="file1" type="file" accept="application/pdf">

or you can specify a unique file type specifier:

<input name="file1" type="file" accept=".pdf">

MDN Reference

Browser Compatibility Check

Solution 4:

No way to do that other than validate file extension with JavaScript when input path is populated by the file picker. To implement anything fancier you need to write your own component for whichever browser you want (activeX or XUL)

There's an "accept" attribute in HTML4.01 but I'm not aware of any browser supporting it - e.g. accept="image/gif,image/jpeg - so it's a neat but impractical spec