CODEWITHSUNDEEP
htmlfile-uploadinput
Triet Doan
Triet Doan

Reputation: 12085

How to make <input type="file"/> accept only these types?

I want my uploader only allows these types:

How can I achieve this? What should I put in the accept attribute? Thanks for your help.

EDIT!!!

I have one more thing to ask. When the popup appears for use to choose file, at the down right corner, there is a drop down list contains all allow files. In my case, the list would be long. I see in the list, there is an option called All Supported Types. How can I make it chosen by default and eliminate all other options?

Any help will be appreciated. Thank you.

Upvotes: 130

Views: 355723

Answers (9)

ShadowKnight700
ShadowKnight700

Reputation: 105

<input type=file accept=".jpg, .pdf, .xls">

This is a solution for accepting values.

Upvotes: -1

Martinez
Martinez

Reputation: 468

This is the complete list of MIME Type formats according to extension.

  • .doc: application/msword
  • .docx: application/vnd.openxmlformats-officedocument.wordprocessingml.document
  • .json: application/json
  • .txt: text/plain
  • ...

Example:

<input type="file" accept='application/msword, text/plain' />

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201818

The value of the accept attribute is, as per HTML5 LC, a comma-separated list of items, each of which is a specific media type like image/gif, or a notation like image/* that refers to all image types, or a filename extension like .gif. IE 10+ and Chrome support all of these, whereas Firefox does not support the extensions. Thus, the safest way is to use media types and notations like image/*, in this case

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">

if I understand the intents correctly. Beware that browsers might not recognize the media type names exactly as specified in the authoritative registry, so some testing is needed.

Upvotes: 193

Epistomai
Epistomai

Reputation: 475

IMPORTANT UPDATE:

Due to use of only application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint... allows only till 2003 MS products, and not newest. I've found this:

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

And that includes the new ones. For other files, you can retrieve the MIME TYPE in your file by this way (pardon the lang)(in MIME list types, there aren't this ones):

enter image description here

You can select & copy the type of content

Upvotes: 14

Ajith
Ajith

Reputation: 2439

Use Like below

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />

Upvotes: 144

Wilker Iceri
Wilker Iceri

Reputation: 487

As stated on w3schools:

audio/* - All sound files are accepted

video/* - All video files are accepted

image/* - All image files are accepted

MIME_type - A valid MIME type, with no parameters. Look at IANA MIME types for a complete list of standard MIME types

Upvotes: 6

Amir Md Amiruzzaman
Amir Md Amiruzzaman

Reputation: 2079

for powerpoint and pdf files: 

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>

Upvotes: 9

Sagar Vaghela
Sagar Vaghela

Reputation: 1273

for image write this

<input type=file accept="image/*">

For other, You can use the accept attribute on your form to suggest to the browser to restrict certain types. However, you'll want to re-validate in your server-side code to make sure. Never trust what the client sends you

Upvotes: -2

Chamika Sandamal
Chamika Sandamal

Reputation: 24302

Use accept attribute with the MIME_type as values

<input type="file" accept="image/gif, image/jpeg" />

Upvotes: 13

Related Questions