How to make 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? http://stackoverflow.com/questions/11601342/upload-doc-or-pdf-using-php. Not sure if "application/doc", "application/pdf", and "application/ppt" mime types are supported. — Neigyl R. Noval, Jun 25 '13 at 09:41
Possible duplicate of [Limit file format when using ?](https://stackoverflow.com/questions/4328947/limit-file-format-when-using-input-type-file) — Martin Thoma, Jul 27 '17 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." https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file — Cody, Jul 18 '18 at 20:17

score 185 · Answer 1 · edited Dec 26 '19 at 06:14

185

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 '19 at 06:14

Edric

24,639
13
81
91

answered Jun 22 '14 at 04:49

Jukka K. Korpela

195,524
37
270
390

5

This will not work if your doc file made with ubuntu software. – Shabbir Dhangot Feb 22 '17 at 11:35
@Jukka K. Korpela that filter gets me all the office files i want,thank you – pavan kumar Apr 05 '17 at 11:37
27

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 – Charles Cavalcante May 23 '17 at 15:25
1

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. – Joe Firebaugh Jun 23 '17 at 17:02
did not work when try to upload from android/ios device. If anybody has a solution let me know. – Inderjeet Singh Jan 11 '19 at 11:39
just tested application/msword it doesnt accept .docx documents, which are very common now when downloading from microsoft office online (free version). – RollingInTheDeep Nov 11 '21 at 12:59
docx not supporting with 'application/msword'. any other suggestion? – Kamlesh Sep 22 '22 at 16:41

score 139 · Answer 2 · edited Feb 22 '17 at 11:37

139

Use Like below

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

edited Feb 22 '17 at 11:37

Shabbir Dhangot

8,954
10
58
80

answered Oct 01 '15 at 09:41

Ajith

2,041
1
14
6

4

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. – luxigo Feb 22 '18 at 12:32
2

not worked in mac thanks – Kamlesh Sep 22 '22 at 16:43

score 14 · Answer 3 · answered Nov 01 '17 at 00:17

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

why not to just write extensions? – Alex78191 Nov 16 '21 at 11:18 — Alex78191, Nov 16 '21 at 11:18

score 13 · Answer 4 · answered Jun 25 '13 at 09:40

13

Use accept attribute with the MIME_type as values

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

answered Jun 25 '13 at 09:40

Chamika Sandamal

23,565
5
63
86

6

The code given accepts only GIF and JPEG files, as opposite to what was requested for in the question. – Jukka K. Korpela Jun 22 '14 at 04:35
2

@JukkaK.Korpela, This is just sample code and you can set the `accept` attribute with the `MIME_type`s as values – Chamika Sandamal Jun 23 '14 at 05:02
2

This still presents an "All Files" option. – DaveB Feb 27 '19 at 19:43

score 9 · Answer 5 · answered Jan 10 '14 at 20:24

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>

score 6 · Answer 6 · edited Jun 10 '14 at 19:16

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 '14 at 19:16

Brad Larson

170,088
45
397
571

answered Jun 25 '13 at 09:38

Wilker Iceri

477
2
6

3

@MateusLeon Lose not loose. – reformed Feb 27 '20 at 20:42
@reformed what do you mean? – Alex78191 Nov 16 '21 at 11:20
@Alex78191 I was addressing MateusLeon's comment, which appears to be deleted. – reformed Nov 16 '21 at 19:07

score -2 · Answer 7 · answered Jun 25 '13 at 09:43

-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 '13 at 09:43

Sagar Vaghela

1,165
5
20
38

4

The code given accepts only image files, as opposite to what was requested for in the question. – Jukka K. Korpela Jun 22 '14 at 04:34

How to make accept only these types?

7 Answers7

Linked