restrict file upload selection to specific types

Question

Anyway to restrict the selection of file types via the <input type="file" /> element?

For instance, if I wanted only images types to be uploaded, I would restrict the possible selections to (image/jpg,image/gif,image/png), and the selection dialog would grey out files of other mime types.

p.s. I know that I can do this after the fact with the File API by scanning the .type attributes. I'm really trying to restrict this before hand.. I also know I can do this via flash, but I do NOT want to have use flash for this.

Community · Accepted Answer · 2017-05-23 11:33:17Z

There is an html attribute for this specific purpose called accept but it has little support across browsers. Because of this server side validation is recommended instead.

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

If you don't have access to the backend have a look at a flash based solution like SWFUpload.

See more on this here: File input 'accept' attribute - is it useful?

According to w3schools the accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6. No version numbers of Firefox, Opera or Chrome were specified.

Radek Pech · Accepted Answer · 2013-10-11 07:54:25Z

It's better to let user select any file, and then check its type - this is better supported by the browsers:

var file = (el[0].files ? el[0].files[0] : el[0].value || undefined), supportedFormats = ['image/jpg','image/gif','image/png']; if (file && file.type) { if (0 > supportedFormats.indexOf(file.type)) { alert('unsupported format'); } else { upload(); } }

You can also check for file size using file.size property.

The question was about how to do it, not if you think this is the good way to proceed.

Collectives™ on Stack Overflow

restrict file upload selection to specific types

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related