William Duffy

Glasgow Based C# ASP.NET Web Developer

ASP.NET’s Image Upload Filetype Validation

ASP.NET’s file upload facility offers a quick, easy method for allowing users to upload content to your server. In many cases however the upload type must be restricted. For example, perhaps you are allowing users to upload a profile image. You certainly don’t want them to be capable of uploading an executable (.exe) file!

The simple solution is to attach a RegularExpressionValidator to the file upload control.  Below is an example of a RegularExpressionValidator restricting the accepted filetypes of a FileUpload control to .gif, .jpg, .jpeg or .png.

1
2
<asp:FileUpload ID="uplImage" runat="server" />
<asp:RegularExpressionValidator ID="revImage" ControlToValidate="uplImage" ValidationExpression="^.*\.((j|J)(p|P)(e|E)?(g|G)|(g|G)(i|I)(f|F)|(p|P)(n|N)(g|G))$" Text=" ! Invalid image type" runat="server" />

Here is the regular expression on it’s own.

1
^.*\.((j|J)(p|P)(e|E)?(g|G)|(g|G)(i|I)(f|F)|(p|P)(n|N)(g|G))$

Unfortunately we cannot simply ignore case in the expression. The RegularExpressionValidator does not have an option to ignore case and the ASP.NET Regex Engine’s ignore case construct is not supported on the client side Javascript Regex Engine. However, the expression above will match all variations of upper/lowercase characters such as .gif, .GIF and .Gif

One small gotcha, don’t forget to check in your postback handler that the page is valid! If you do forget and the regular expression match fails, your code will still execute.

1
2
3
4
5
6
7
protected void btnUpload_Click(object sender, EventArgs e)
{
        if (IsValid)
        {
                // Process your data
        }
}

Categorized as Uncategorized

16 Comments

  1. Awsome! I never thought of doing it like that before. I’ve always just used a switch statement and a custom validator. Nice job!

  2. thanks

  3. Thank you so much for sharing this brilliant little code! You have protected us from hackers!
    :-)

  4. Small problem in this validation, My vista user name has a . in it :p

    When I select a file for uploading the text in the box is:

    C:\Users\Sander.westhuis\Desktop\calendar_icon.gif

    You understand that “westhuis\Desktop\calendar_icon.gif” wont validate as a extension :p

  5. Hi Sander, The regular expression matches “any” character (.*) and only enforces that the value “ends” with .gif or .jpeg. A . within the file location (ie your login identity) should’nt make any difference, as long as there is a valid file extension at the end of the value preceeded by a . (\.)

  6. thax a lot

  7. This relies on file extensions and isn’t as solid as checking the header data or for an offset. Does that kind of solution even exist? Can’t find it anywhere…

  8. Brian, you don’t have access to the kind of information you mentioned on the client. To get that information you need to query the data transferred to the server, and this requires the whole file be uploaded. First. This is very inconvenient, especially if te file is larger than a meg of so.

  9. One small gotcha, don’t forget to check in your postback handler that the page is valid! If you do forget and the regular expression match fails, your code will still execute.

    Can i achieve that on client side?

  10. @Tom The RegularExpressionValidator already validates on the client side automatically. The reason for ensuring your code checks IsValid on the server after postback is because a user can easily turn off JavaScript on their browser, avoiding the client side validation checks.

  11. Thanks for RegularExpressionValidator ,it is realy best

  12. Mohammed Kaleem says:

    Thanx .. Its really awsome

  13. Thanks!!!!!!!!!!!

  14. Raksha Nirwan says:

    Thank you :)

  15. Thanks, i never think this option to use

  16. Thank you William. Its really awesome .

comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

Trackbacks & Pingbacks

  1. Gary Devenay

    Awsome! I never thought of doing it like that before. I’ve always just used a switch statement and a custom validator. Nice job!

  2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

    Trackbacks & Pingbacks

    1. sanjay

      thanks

    2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

      Trackbacks & Pingbacks

      1. Britt

        Thank you so much for sharing this brilliant little code! You have protected us from hackers!
        :-)

      2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

        Trackbacks & Pingbacks

        1. Sander

          Small problem in this validation, My vista user name has a . in it :p

          When I select a file for uploading the text in the box is:

          C:\Users\Sander.westhuis\Desktop\calendar_icon.gif

          You understand that “westhuis\Desktop\calendar_icon.gif” wont validate as a extension :p

        2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

          Trackbacks & Pingbacks

          1. William

            Hi Sander, The regular expression matches “any” character (.*) and only enforces that the value “ends” with .gif or .jpeg. A . within the file location (ie your login identity) should’nt make any difference, as long as there is a valid file extension at the end of the value preceeded by a . (\.)

          2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

            Trackbacks & Pingbacks

            1. kalpna

              thax a lot

            2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

              Trackbacks & Pingbacks

              1. Brian

                This relies on file extensions and isn’t as solid as checking the header data or for an offset. Does that kind of solution even exist? Can’t find it anywhere…

              2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                Trackbacks & Pingbacks

                1. William

                  Brian, you don’t have access to the kind of information you mentioned on the client. To get that information you need to query the data transferred to the server, and this requires the whole file be uploaded. First. This is very inconvenient, especially if te file is larger than a meg of so.

                2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                  Trackbacks & Pingbacks

                  1. Tom

                    One small gotcha, don’t forget to check in your postback handler that the page is valid! If you do forget and the regular expression match fails, your code will still execute.

                    Can i achieve that on client side?

                  2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                    Trackbacks & Pingbacks

                    1. William

                      @Tom The RegularExpressionValidator already validates on the client side automatically. The reason for ensuring your code checks IsValid on the server after postback is because a user can easily turn off JavaScript on their browser, avoiding the client side validation checks.

                    2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                      Trackbacks & Pingbacks

                      1. Suranjan

                        Thanks for RegularExpressionValidator ,it is realy best

                      2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                        Trackbacks & Pingbacks

                        1. Mohammed Kaleem

                          Thanx .. Its really awsome

                        2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                          Trackbacks & Pingbacks

                          1. Amit

                            Thanks!!!!!!!!!!!

                          2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                            Trackbacks & Pingbacks

                            1. Raksha Nirwan

                              Thank you :)

                            2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                              Trackbacks & Pingbacks

                              1. Denish

                                Thanks, i never think this option to use

                              2. comment_type == "trackback" || $comment->comment_type == "pingback" || ereg("", $comment->comment_content) || ereg("", $comment->comment_content)) { ?>

                                Trackbacks & Pingbacks

                                1. Arvind

                                  Thank you William. Its really awesome .

                                Leave a Reply