CODEWITHSUNDEEP
c#asp.netimagefile-upload
Geeth
Geeth

Reputation: 5343

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.

Upvotes: 36

Views: 114378

Answers (8)

David Neale
David Neale

Reputation: 17018

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

Upvotes: 2

Tonko Boekhoud
Tonko Boekhoud

Reputation: 961

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.

Upvotes: 72

Ravindra Vairagi
Ravindra Vairagi

Reputation: 1083

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>

Upvotes: 3

Christoph Br&#252;ckmann
Christoph Br&#252;ckmann

Reputation: 1373

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>

Upvotes: 22

Somnath R
Somnath R

Reputation: 31

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

Upvotes: 3

iconoclast
iconoclast

Reputation: 22610

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>

Upvotes: 14

Gant
Gant

Reputation: 29889

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.

Upvotes: 1

netadictos
netadictos

Reputation: 7722

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.

Upvotes: 8

Related Questions