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

is there any way that html element file

<input name="file1" type="file" style="width:300px">

only accept PDF files and when we browse its only show PDF files...

Thanks

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.

Not really. See https://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful/181291#181291 .

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

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

The previous posters made a little mistake. The accept attribute is only a display filter. It will not validate your entry before submitting.

This attribute forces the file dialog to display the required mime type only. But the user can override that filter. He can choose . and see all the files in the current directory. By doing so, he can select any file with any extension, and submit the form.

So, to answer to the original poster, NO. You cannot restrict the input file to one particular extension by using HTML.

But you can use javascript to test the filename that has been chosen, just before submitting. Just insert an onclick attribute on your submit button and call the code that will test the input file value. If the extension is forbidden, you'll have to return false to invalidate the form. You may even use a jQuery custom validator and so on, to validate the form.

Finally, you'll have to test the extension on the server side too. Same problem about the maximum allowed file size.

Not with the HTML file control, no. A flash file uploader can do that for you though. You could use some client-side code to check for the PDF extension after they select, but you cannot directly control what they can select.

No.

But you can check out [SWFUpload][1] and [Ajax Upload][2]

[1]: http://swfupload.org/ "SWFUpload" [2]: http://valums.com/ajax-upload/ "Ajax Upload"

It can be useful to prevent the distracted user to make an involuntary bad choice, but in any case, you have to do the check on the server side anyway.
The best way is to be clear in the upload page. After that, if the user stupidly upload a big file with the wrong type, that's their loss of time, no?