Fileupload: allow only .jpg .gif and .png

Hi all

I programmed a FileUpload which is already working fine. Now I'd like to add a feature: At the form where I browse for the file I want to upload, I'd like to validate the file type.

I'd like to allow only image files in the formats .jpg, .gif and .png and show an error message if the file is not valid (= if the format is not allowed)
Does anybody know how i can program this feature?

Re: Fileupload: allow only .jpg .gif and .png

i can always rename my a.exe to a.jpg, can i not?

but i guess you could try/catch opening the uploaded stream as a .NET image, and reject the file if exception is caught.

Re: Fileupload: allow only .jpg .gif and .png

how about using a regular expression validator?

Re: Fileupload: allow only .jpg .gif and .png

hi,

look at this

Client-Side Validation of File Types Permissible to Upload

There are several methods you can use to control the types of files that are uploaded to the server. Unfortunately, there is no bullet-proof method to protect you from someone uploading files that would be considered malicious. You can take a few steps, however, to make this process of allowing end users to upload files a little more manageable.

One nice method you can employ is to use the ASP.NET validation controls that are provided for free with ASP.NET. These controls enable you to do a regular-expression check upon the file that is being uploaded to see if the extension of the file is one you permit to be uploaded.

This is ideal for browsers that allow client-side use of the validation controls because it forces the checking to be done on the client; the file is not uploaded to the server if the signature isn't one you allow. Listing 3 shows you an example of using validation controls to accomplish this task.

Note The use of validation controls is not explained here. Take a look at Validating ASP.NET Server Controls for a complete explanation of validation controls and how to use them in your ASP.NET pages.

Listing 3. Using validation controls to restrict the types of files uploaded to the server

<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
 Text="Upload File" />&nbsp;<br />
<br />
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:RegularExpressionValidator 
 id="RegularExpressionValidator1" runat="server" 
 ErrorMessage="Only mp3, m3u or mpeg files are allowed!" 
 ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))
    +(.mp3|.MP3|.mpeg|.MPEG|.m3u|.M3U)$" 
 ControlToValidate="FileUpload1"></asp:RegularExpressionValidator>
<br />
<asp:RequiredFieldValidator 
 id="RequiredFieldValidator1" runat="server" 
 ErrorMessage="This is a required field!" 
 ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>

This simple ASP.NET page uses validation controls so that the end user can only upload .mp3, .mpeg, or .m3u files to the server. If the file type is not one these three choices, a Validation control throws an exception onto the screen. This is shown in Figure 4.

Figure 4. Validating the file type using validation controls

Using Validation controls is not a foolproof way of controlling the files that are uploaded to the server. It wouldn't be too hard for someone to change the file extension of a file so it would be accepted and uploaded to the server, thereby bypassing this simple security model.

Adding Server-Side File Type Validation

You just saw an easy way to add some ASP.NET validation server controls to your ASP.NET page to perform a client side validation of the file extension (in just a textual manner). Now let's take a look at how to perform a similar operation on the server-side. This is presented in Listing 4.

Listing 4. Checking the file type on the server

Visual Basic

    Protected Sub Button1_Click(ByVal sender As Object, _
      ByVal e As System.EventArgs)
        If FileUpload1.HasFile Then
            Dim fileExt As String
            fileExt = System.IO.Path.GetExtension(FileUpload1.FileName)
            
            If (fileExt = ".mp3") Then
                Try
                    FileUpload1.SaveAs("C:\Uploads\" & _
                       FileUpload1.FileName)
                    Label1.Text = "File name: " & _
                      FileUpload1.PostedFile.FileName & "<br>" & _
                      "File Size: " & _
                      FileUpload1.PostedFile.ContentLength & " kb<br>" & _
                      "Content type: " & _
                      FileUpload1.PostedFile.ContentType
                Catch ex As Exception
                    Label1.Text = "ERROR: " & ex.Message.ToString()
                End Try
            Else
                Label1.Text = "Only .mp3 files allowed!"
            End If
        Else
            Label1.Text = "You have not specified a file."
        End If
    End Sub

    protected void Button1_Click(object sender, EventArgs e)
    {

        if (FileUpload1.HasFile)
        {
            string fileExt = 
               System.IO.Path.GetExtension(FileUpload1.FileName);

            if (fileExt == ".mp3")
            {
                try
                {
                    FileUpload1.SaveAs("C:\\Uploads\\" + 
                       FileUpload1.FileName);
                    Label1.Text = "File name: " +
                        FileUpload1.PostedFile.FileName + "<br>" +
                        FileUpload1.PostedFile.ContentLength + " kb<br>" +
                        "Content type: " +
                        FileUpload1.PostedFile.ContentType;
                }
                catch (Exception ex)
                {
                    Label1.Text = "ERROR: " + ex.Message.ToString();
                }
            }
            else
            {
                Label1.Text = "Only .mp3 files allowed!";
            }
        }
        else
        {
            Label1.Text = "You have not specified a file.";
        }
    }

Now, by using the GetExtension method from the System.IO.Path namespace, you can perform basically the same operation. It is important to note that this doesn't get around an end user's ability to simply change the file extension to something that works and upload that altered file to the hosting server.

Re: Fileupload: allow only .jpg .gif and .png

one way you can check is by peeking at the filestream in the posted file.

you can open a reader and take the first 10 or so bytes. And from the header info you can usually tell what type of file it is.
Its not bulletproof however, because the location of the filetype info is not always in the same place or format.

heres an if i used to check for valid image types a while ago. i just passed it the first chunk in my upload

//checks if it is an image
		private bool IsImage(byte[] data)
		{
			//read 64 bytes of the stream only to determine the type
			string myStr = System.Text.Encoding.ASCII.GetString(data).Substring(0,16);
			//check if its definately an image. 
			if(myStr.Substring(8,2).ToString().ToLower()!="if")
			{
				//its not a jpeg
				if(myStr.Substring(0,3).ToString().ToLower() != "gif")
				{
					//its not a gif
					if(myStr.Substring(0,2).ToString().ToLower() != "bm")
					{
						//its not a .bmp
						if(myStr.Substring(0,2).ToString().ToLower() != "ii")
						{
							//its not a tiff
							//ProcessErrors("notImage");
							this.myFile.PostedFile.InputStream.Close();
							myStr = null;
							return false;
						}
					}
				}
			}
			myStr = null;
			return true;
		}

hth
mcm

Re: Fileupload: allow only .jpg .gif and .png

I like mcmcomasp's solution slightly better.

You realize that you are doing all that work and I can just rename my file? Spend your time on other features of your project, I'd suggest.

Re: Fileupload: allow only .jpg .gif and .png

WoW, Egypt Winnnnnnnn,[:D][:D]
and I just found the solution for that problem
try this if you want

___________________________

<script language="javascript">
     function ValidateFile(source, args)
     {
        try
         {
        var fileAndPath=
           document.getElementById(source.controltovalidate).value;
        var lastPathDelimiter=fileAndPath.lastIndexOf("\\");
        var fileNameOnly=fileAndPath.substring(lastPathDelimiter+1);
        var file_extDelimiter=fileNameOnly.lastIndexOf(".");
        var file_ext=fileNameOnly.substring(file_extDelimiter+1).toLowerCase();
        if(file_ext!="jpg")
             {
             args.IsValid = false;
             if(file_ext!="gif")
               args.IsValid = false;
                  if(file_ext!="png")
                  {
                    args.IsValid = false;
                     return;
                  }
                }
        }catch(err)
        {
          txt="There was an error on this page.\n\n";
          txt+="Error description: " + err.description + "\n\n";
          txt+="Click OK to continue.\n\n";
          txt+=document.getElementById(source.controltovalidate).value;
          alert(txt);
          }
         
           args.IsValid = true;
    }
    </script>
      
 <asp:FileUpload ID="FileUpload1" runat="server" />

<asp:CustomValidator ID="CustomValidator1"
ClientValidationFunction="ValidateFile"  runat="server"
ControlToValidate="FileUpload1"
Display="dynamic" ErrorMessage="images only ">
</asp:CustomValidator>

____________________________

please post comments if there any comment,I'm not sure about it yet,

Thank you

Re: Fileupload: allow only .jpg .gif and .png

while this solution is still workable the problem still exists where a user can easily change the extension of the filename to bypass this check. the only "sure fire" way to know if its an image is to peek at the file stream as i demonstrated above.

hth,

mcm

Re: Fileupload: allow only .jpg .gif and .png

Well, I know that I can't check if it's an image of not at client side , but not all users think to change file extension , but we can use that solution as indicator to the user that we accept images only, and at server side we can use your "sure fire" way to detect images inly, anyway Great Topic , thank you very much.

mcmcomasp

while this solution is still workable the problem still exists where a user can easily change the extension of the filename to bypass this check. the only "sure fire" way to know if its an image is to peek at the file stream as i demonstrated above.

hth,

mcm

Re: Fileupload: allow only .jpg .gif and .png

That's pretty funny the FileUpload control's contentType can lie to you. I guess it just loads the file into a byte[] and let's you take it from there.

I think you can test the real file contents information by loading the file into a System.Drawing.Image and testing it's RawFormat property. There, you will find a Guid that is unique for each image type. If you can't load the file into an Image, I guess it's not a jpg, png or gif as you requested.

System.Drawing.Image img = System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream);

if (img.RawFormat.Guid == System.Drawing.Imaging.ImageFormat.Jpeg.Guid) {do something}

Or, if you want to return the type of the image, try this:

   public static string MimeType(System.Drawing.Image imgPhoto)
   {
       foreach (ImageCodecInfo codec in ImageCodecInfo.GetImageDecoders())
       {
           if (codec.FormatID == imgPhoto.RawFormat.Guid)
               return codec.MimeType;
       }
       return "image/unknown";
   }

Re: Fileupload: allow only .jpg .gif and .png

this is another good idea as well. One problem with peeking into the stream is sometimes you can get errors with uploading the file, i have found that i actually have to dump the stream and re-upload the whole thing from the beginning after peeking at the first few bytes, if not sometimes the images does not re-assemble itself. This looks like a good solution if it works.

mcm

Re: Fileupload: allow only .jpg .gif and .png

if (FileUpload1.HasFile)

{

try

{

if (FileUpload1.FileContent.Length == 2097152)

{

file_ext = System.IO.Path.GetExtension(FileUpload1.FileName).ToUpper();

if (file_ext == ".BMP")

{

int j, mn;

try

{

FileUpload1.SaveAs(Server.MapPath("UploadFiles") + "\\" + FileUpload1.FileName);

}

catch (DirectoryNotFoundException exc)

{

try

{

System.IO.Directory.CreateDirectory(Server.MapPath("UploadFiles"));

}

catch (Exception ex)

{

// handling code is here

}

else if (file_ext == ".JPG")

{

int j, mn;

try

{

FileUpload1.SaveAs(Server.MapPath("UploadFiles") + "\\" + FileUpload1.FileName);

}

catch (DirectoryNotFoundException exc)

{

try

{

System.IO.Directory.CreateDirectory(Server.MapPath("UploadFiles"));

}

catch (Exception ex)

{

// handling code is here

}

else if (file_ext == ".PNG")

{

int j, mn;

try

{

FileUpload1.SaveAs(Server.MapPath("UploadFiles") + "\\" + FileUpload1.FileName);

}

catch (DirectoryNotFoundException exc)

{

}

else

{

Label3.Text = "Only.jpg, .bmp, .png, .jpeg, .gif extensions have allowed";

}

else

{

Label3.Text = "File maximum size is 2MB";

}

catch (Exception exc)

{

// handling code is here

}

i have written this code. maybe it will help you. try this one

Re: Fileupload: allow only .jpg .gif and .png

Let me introduce || (or) and && (and) to you tsolbayar :)

write your if check like this using ||

if (file_ext == ".BMP" || ile_ext == ".BMP" || file_ext == ".PNG")

It shouldn't matter if a .exe file is being renamed to .jpg or .gif or whatever because it won't execute the file unless it's .exe. The image browser will simply try to open the file and get a error as it's not reconizeable. But as mentioned I think you'll get the problem sorted if you load the image into a System.Drawing.Image, and use the FromStream() method, then you could also validate the image size and dimension to make sure it's not huge.

A bit of late reply but if some people are still searching this forums as I were then it could be handy.

Re: Fileupload: allow only .jpg .gif and .png

I believe there is much easier way how to find out whether posted binary data are image or not:

Image uploadedImage = null;
if (ImageUpload.HasFile && ImageUpload.FileName != string.Empty && ImageUpload.FileContent.Length > 0)
{
    try
    {
        uploadedImage = Image.FromStream(ImageUpload.PostedFile.InputStream);
    }
    catch (Exception ex)
    {
         lblUploadStatus.Text = "Selected file is not an image.<br />" + ex.Message;
    }


    if (uploadedImage != null)
    {
        string savePath = string.Format("{0}/{1}", Server.MapPath("~/images/orig/upload_temp"), ImageUpload.FileName);
        uploadedImage.Save(savePath, ImageFormat.Jpeg);
    }
}

Hope this will help.

Re: Fileupload: allow only .jpg .gif and .png

jessjing
You just saw an easy way to add some ASP.NET validation server controls to your ASP.NET page to perform a client side validation of the file extension (in just a textual manner). Now let's take a look at how to perform a similar operation on the server-side.

It's a common mistake is to think that Validation Controls only work on client side, however, they ALSO work on server side, so why would you need to implement this code?

Re: Fileupload: allow only .jpg .gif and .png

sensei_cz1
I believe there is much easier way how to find out whether posted binary data are image or not

Even if you're sure that you're dealing with an image, you still not sure!

http://forums.asp.net/t/1514476.aspx

Re: Fileupload: allow only .jpg .gif and .png

moud_gersy
and I just found the solution for that problem

Client side scripts can never be considered a solution, because you cannot trust them. At the most, they can help, preventing unneccesary postbacks to the server and provide a richer UI, but that's it! All validation should be done at serverside also!

Re: Fileupload: allow only .jpg .gif and .png

glad to see this thread still sparks debate all this time later.

hans v is right. client side script can only be used to filter blatent extension differences - a server side solution is the only way to determine if a file is really of a given type. reading the file stream is still my favourite but i do like attempting to create an image from the stream and seeing if that returns a valid image or not. It would be interesting to see if any malicious file types can either:

a) mimic an imagetype for the first (x) bytes of the stream....

b) trick the Image.FromStream method to create an image (dont know if that was the exact method name but you get what i saying)

The image from stream method though probably requires the whole file to already be transmitted to the server, where reading the stream you can just grab a subset and dump it if you want too.

mcm

Re: Fileupload: allow only .jpg .gif and .png

go to http://southdesk.com/content/aspnet-file-uploader-validation-file-type-and-file-size to see solution

Re: Fileupload: allow only .jpg .gif and .png