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.

score 74 · Accepted Answer · edited May 23 '17 at 11:33

74

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?

edited May 23 '17 at 11:33

Community

1
1

answered Sep 27 '11 at 20:53

amosrivera

26,114
9
67
76

2

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. – Petr Peller Jul 21 '13 at 16:40

score 8 · Answer 2 · answered Oct 11 '13 at 07:54

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. — Moonchild, Oct 20 '16 at 12:59

restrict file upload selection to specific types

2 Answers2

Linked

Related