How to restrict file type in FileUpload control

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

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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>

Method 3

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>

Method 4

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.

Method 5

//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..

Method 6

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>

Method 7

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

Method 8

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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0