How to restrict file type in FileUpload control

Question

Is it possible to allow the fileupload control to show only images?

When we click the Browse button it should show only images.

@Amgdy - "show" = only display files of a certain type within the actual file dialog browser that pops up when you click on the 'browse' button. — Jagd, Jan 23 '12 at 17:35

score 68 · Answer 1 · edited Apr 19 '19 at 18:27

68

In 2015, web browsers support the input accept attribute, so you can do this:

<asp:FileUpload ID="fileUploader" runat="server" accept=".png,.jpg,.jpeg,.gif" />

Keep in mind Visual Studio may show you a message about this as an invalid attribute of the FileUpload ASP tool, however.

edited Apr 19 '19 at 18:27

TylerH

20,799
66
75
101

answered Jan 18 '15 at 14:29

Tonko Boekhoud

819
6
9

7

This will still allow a user to upload a file that doesn't use one of those extensions – jtate Nov 29 '16 at 16:57
3

@jtate The question is limited to *show* only images. You should always validate the upload (and any user input) on the server side, to catch somebody trying to upload something unwanted. User could simply rename the extension of an unwanted file to something in the accept list. So you should approach the accept list in the file upload as a simple help to the user and at least validate on the back end. – Tonko Boekhoud Dec 05 '16 at 07:37
That's a very good solution. Just updating here that it does not have any effect in Microsoft Edge browser., or else it works on IE10/11, Firefox, Chrome and Safari. Thanks! – kaushalparik27 Aug 16 '19 at 06:20

Christoph Brückmann · Answer 2 · 2016-01-07T09:39:34.923

I found no direct solution for this problem.

This is my workaround using the RegularExpressionValidator:

<asp:FileUpload ID="fuImportImage" runat="server" />
<asp:RegularExpressionValidator ID="regexValidator" runat="server"
     ControlToValidate="fuImportImage"
     ErrorMessage="Only JPEG images are allowed" 
     ValidationExpression="(.*\.([Jj][Pp][Gg])|.*\.([Jj][Pp][Ee][Gg])$)">
</asp:RegularExpressionValidator>

score 14 · Answer 3 · answered Feb 12 '13 at 19:33

You cannot strictly restrict the file type, but if the browser supports it you can cause it to initially show just a certain type of file:

<form method="post" action="blahblah.blah">
  <input type="file" name="image" id="image" accept="image/png, image/jpeg" />
</form>

score 8 · Accepted Answer · answered May 06 '10 at 10:06

8

No, in web you can't from client side, evidently from server side you can do amazing things. For this kind of thing, programmers normally use Activex, flash or the like.

answered May 06 '10 at 10:06

netadictos

7,602
2
42
69

5

New web browsers support the input accept attribute, so you can do this: `accept=".png,.jpg,.jpeg,.gif" ` – Learning Sep 08 '19 at 09:20
that doesn't work. In Chrome it appears to restrict the file picker to image types but you can change the dropdown to (all files *.*) and upload a non image file. – Norbert Norbertson Sep 14 '20 at 07:47

Somnath R · Answer 5 · 2013-02-22T05:11:01.103

//VALIDATE FILE EXTENTION
var _validFileFlag;
function fValidFileExt(vfilePath){
  var vFileName=vfilePath.split('\\').pop();
  var vFileExt=vfileName.split('.').pop();
  if(vFileExt.toUpperCase()=="JPEG" || vFileExt.toUpperCase()=="JPG"){
     _validFileFlag = true;
  } 
  _validFileFlag = false;
} 

<asp:FileUpload ID="FileUpload1" onchange="fValidFileExt(this.value);" runat="server"  />

Check '_validFileFlag' while saving data/upload..

David Neale · Answer 6 · 2019-12-11T16:12:20.700

2

Assuming you mean uploading images only.

You can check the ContentType property of the file (I.e. image/gif).

Take a look here for an example: https://web.archive.org/web/20100306030822/http://www.15seconds.com/issue/061116.htm

edited Dec 11 '19 at 16:12

answered May 06 '10 at 10:07

David Neale

16,498
6
59
85

the link is dead as of Nov 2019 – t.durden Oct 31 '19 at 15:24

score 2 · Answer 7 · answered May 22 '17 at 11:06

Use accept attribute to show only images in file browser like below -

<asp:FileUpload ID="FileUploadFileType" runat="server" CssClass="form-control" accept=".png,.jpg,.jpeg,.gif" />

with asp.nets RegularExpressionValidator to validate selected file type with validation message.

<asp:RegularExpressionValidator ID="RegExValFileUploadFileType" runat="server"
                        ControlToValidate="FileUploadFileType"
                        ErrorMessage="Only .jpg,.png,.jpeg,.gif Files are allowed" Font-Bold="True"
                        Font-Size="Medium"
                        ValidationExpression="(.*?)\.(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF)$"></asp:RegularExpressionValidator>

score 1 · Answer 8 · answered May 06 '10 at 10:20

1

With plain <input type="file">, I am afraid it's not possible on the client-side.

However, some 3rd party uploader such as SWFUpload provides this functionality.

answered May 06 '10 at 10:20

Gant

29,661
6
46
65

How to restrict file type in FileUpload control

8 Answers8

Linked

Related