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

Question

I want my uploader only allows these types:

doc, docx.
xls, xlsx.
ppt, pptx.
txt.
pdf.
Image 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.

Will this help? stackoverflow.com/questions/11601342/…. Not sure if "application/doc", "application/pdf", and "application/ppt" mime types are supported. — Neigyl R. Noval
– Neigyl R. Noval, Commented Jun 25, 2013 at 9:41
Possible duplicate of Limit file format when using <input type="file">? — Martin Thoma
– Martin Thoma, Commented Jul 27, 2017 at 15:09
Regarding your 2nd question: "The accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types. Because of this, you should make sure that the accept attribute is backed up by appropriate server-side validation." developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file — Cody
– Cody, Commented Jul 18, 2018 at 20:17

Edric · Accepted Answer · 2019-12-26 06:14:06Z

195

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.

edited Dec 26, 2019 at 6:14

Edric

27.2k13 gold badges88 silver badges97 bronze badges

answered Jun 22, 2014 at 4:49

Jukka K. Korpela

203k38 gold badges281 silver badges407 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Shabbir Dhangot Over a year ago

This will not work if your doc file made with ubuntu software.

pavan kumar Over a year ago

@Jukka K. Korpela that filter gets me all the office files i want,thank you

Charles Cavalcante Over a year ago

To add suport for docx, xlsx and pptx: application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.presentationml.slideshow

Joe Firebaugh Over a year ago

Maybe it was true in 2014 when this answer was given, but I can confirm that a comma separated list of extensions is working correctly on Firefox.

Inderjeet Singh Over a year ago

did not work when try to upload from android/ios device. If anybody has a solution let me know.

|

Shabbir Dhangot · Accepted Answer · 2017-02-22 11:37:19Z

144

Use Like below

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

edited Feb 22, 2017 at 11:37

Shabbir Dhangot

9,14110 gold badges64 silver badges85 bronze badges

answered Oct 1, 2015 at 9:41

Ajith

2,5192 gold badges16 silver badges6 bronze badges

1 Comment

luxigo Over a year ago

Browsers usually do not check the file content, so extension is ok - even preferred since browsers do not know all the mime types.. You have to check the file content yourself.

Epistomai · Accepted Answer · 2017-11-01 00:17:55Z

14

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):

You can select & copy the type of content

answered Nov 1, 2017 at 0:17

Epistomai

4751 gold badge6 silver badges16 bronze badges

1 Comment

Alex78191 Over a year ago

why not to just write extensions?

Chamika Sandamal · Accepted Answer · 2013-06-25 09:40:25Z

13

Use accept attribute with the MIME_type as values

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

answered Jun 25, 2013 at 9:40

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

3 Comments

Jukka K. Korpela Over a year ago

The code given accepts only GIF and JPEG files, as opposite to what was requested for in the question.

Chamika Sandamal Over a year ago

@JukkaK.Korpela, This is just sample code and you can set the accept attribute with the MIME_types as values

DaveB Over a year ago

This still presents an "All Files" option.

Amir Md Amiruzzaman · Accepted Answer · 2014-01-10 20:24:00Z

9

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>

answered Jan 10, 2014 at 20:24

Amir Md Amiruzzaman

2,07526 silver badges25 bronze badges

Comments

Brad Larson · Accepted Answer · 2014-06-10 19:16:12Z

6

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

edited Jun 10, 2014 at 19:16

Brad Larson

170k45 gold badges401 silver badges574 bronze badges

answered Jun 25, 2013 at 9:38

Wilker Iceri

4872 silver badges6 bronze badges

Comments

Martinez · Accepted Answer · 2024-02-28 20:23:51Z

0

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' />

answered Feb 28, 2024 at 20:23

Martinez

5184 silver badges7 bronze badges

Comments

ShadowKnight700 · Accepted Answer · 2025-02-08 16:11:06Z

-1

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

This is a solution for accepting values.

edited Feb 8 at 16:11

answered Feb 2 at 15:54

ShadowKnight700

1059 bronze badges

1 Comment

Huander Tironi Feb 2 at 22:16

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Sagar Vaghela · Accepted Answer · 2013-06-25 09:43:58Z

-2

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

answered Jun 25, 2013 at 9:43

Sagar Vaghela

1,2837 gold badges23 silver badges38 bronze badges

1 Comment

Jukka K. Korpela Over a year ago

The code given accepts only image files, as opposite to what was requested for in the question.

Collectives™ on Stack Overflow

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

9 Answers 9

7 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

1 Comment

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related