How to filter input type="file" dialog by specific file type?

Question

I want to restrict the browser to JPG files when I click on browse button of the <input type="file">.

Is it possible to browse for specific file types?

What kind of upload button? HTML file input? Flash? Something else? — Thilo, Jan 20 '12 at 07:37
Possible answer: http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful — Matt, Jan 20 '12 at 07:38
http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful — Azodious, Jan 20 '12 at 07:40
its a Jsp page and I am using multipartrequest to upload the file — Sachin J, Jan 20 '12 at 07:43

Vegard · Answer 1 · 2019-04-24T14:13:39.820

96

This will give the correct (custom) filter when the file dialog is showing:

<input type="file" accept=".jpg, .png, .jpeg, .gif, .bmp, .tif, .tiff|image/*">

edited Apr 24 '19 at 14:13

answered Jun 25 '15 at 08:40

Vegard

3,712
24
25

@jpoppe it's a small typo. You can actually edit the answer and fix it if you wish. :) – lurker Apr 19 '19 at 17:46
@jpoppe, thanks for pointing that out, it has now been corrected :) – Vegard Apr 24 '19 at 14:14
Ha! Didn't know you could actually specify the extension. I only though it had to be the mime type. But be mindful of this: https://caniuse.com/#feat=input-file-accept , specifically annotation number 1 – TheRealChx101 Feb 13 '20 at 08:09

score 93 · Accepted Answer · answered Jan 20 '12 at 07:41

93

See http://www.w3schools.com/tags/att_input_accept.asp:

The accept attribute is supported in all major browsers, except Internet Explorer and Safari. Definition and Usage

The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).

Note: The accept attribute can only be used with <input type="file">.

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

Syntax <input accept="audio/*|video/*|image/*|MIME_type" />

Tip: To specify more than one value, separate the values with a comma (e.g. <input accept="audio/*,video/*,image/*" />.

answered Jan 20 '12 at 07:41

JB Nizet

633,450
80
1,108
1,174

1

Thanks.. But how to fix it for IE?? – Sachin J Jan 20 '12 at 09:23
8

You don't fix it. That's something you have no control on. Just make it clear in the UI that what the user should select is an image, and validate it at server-side. That's what "File uploads should be validated on the server" means. – JB Nizet Jan 20 '12 at 09:27
This makes mp4 unselectable in Safari. You also need to specify `video/mp4`. – Kit Sunde Dec 10 '13 at 02:01
1

FWIW IE 11 does respect this attribute – flipchart Aug 12 '14 at 10:50
And MS Edge fails to respect it https://connect.microsoft.com/IE/feedback/details/1937551 – AlfonsoML Oct 24 '15 at 15:09
[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) is the reference on MDN – XoXo Apr 16 '18 at 14:05

score 2 · Answer 3 · edited Feb 19 '14 at 09:25

2

<asp:FileUpload ID="FileUploadExcel" ClientIDMode="Static" runat="server" />
<asp:Button ID="btnUpload" ClientIDMode="Static" runat="server" Text="Upload Excel File" />

.

$('#btnUpload').click(function () {
    var uploadpath = $('#FileUploadExcel').val();
    var fileExtension = uploadpath.substring(uploadpath.lastIndexOf(".") + 1, uploadpath.length);

    if ($('#FileUploadExcel').val().length == 0) {
        // write error message
        return false;
    }

    if (fileExtension == "xls" || fileExtension == "xlsx") {
        //write code for success
    }
    else {
        //error code - select only excel files
        return false;
    }

});

edited Feb 19 '14 at 09:25

slavoo

4,967
63
33
38

answered Feb 19 '14 at 09:03

UserAK47

39
2

@slavoo ~ surely to use ASP inputs the OP would need to be running ASP? Why the addition in your edit? UserAK47's answer does not required them. – Pebbl Feb 19 '14 at 09:33
1

@pebbl Open revisions of this post and switch to `side-by-side markdown` on revision no.2, you can see asp inputs was here before my edit, but is not visible, because it is out from code formating. I fix format only. – slavoo Feb 19 '14 at 09:50
1

@slavoo ~ ah that makes sense... otherwise I would have though you slightly odd :) ty for the clarification. – Pebbl Feb 19 '14 at 10:11
@pebbl This jquery code will with ASP Control will allow to filter only specific type of files to be uploaded – UserAK47 Feb 27 '14 at 02:47

score 0 · Answer 4 · answered Aug 26 '13 at 21:50

Add a custom attribute to <input type="file" file-accept="jpg gif jpeg png bmp"> and read the filenames within javascript that matches the extension provided by the attribute file-accept. This will be kind of bogus, as a text file with any of the above extension will erroneously deteted as image.

score 0 · Answer 5 · answered Jan 20 '12 at 08:16

You can use the accept attribute along with the . It doesn't work in IE and Safari.

Depending on your project scale and extensibility, you could use Struts. Struts offers two ways to limit the uploaded file type, declaratively and programmatically.

For more information: http://struts.apache.org/2.0.14/docs/file-upload.html#FileUpload-FileTypes

How to filter input type="file" dialog by specific file type?

5 Answers5

Linked