How to validate file type in FileUpload Control in ASP.NET

The FileUpload control is used to allow a user to select and upload a single file to the server. The FileUpload control does not cause a PostBack to the Web server. After the user selects a file, the user needs to cause a PostBack using a different control, such as a Button. The PostBack cause the file to be uploaded to the server as posted data.

As FileUpload control allows user to upload files but makes no attempt to validate the safety of the uploaded files. The FileUploaded control does not provide a means to filter the files types that can be uploaded by a user, but you can examine the file characteristics, such as the file name and extension,as well as the contentsType, after the file has been uploaded.

As ,I mentioned we can examine the file characteristics only after the file has been uploaded, but we need a validation to validate a file type before updating the file such as file type must be either jpg or gif image.

Due to the lack of validation ability in FileUpload control, we need to write some additional code to be sure that user will upload regular file type.

In this article, I am trying to upload a image file using FileUpload control and implement a CustomValidator to validate updating file type must be either jpg or gif.

In ASP.NET we have client and server side, validation could be done on client and on server. Because of security reasons, we need to have server side validation but we also need client side validation because it is faster and more user friendly. Let see how to implement both types, for example our web application will allow only upload of .jpg or .gif files.

First of all drag a FileUpload control on your page from tool box and a control for PostBack like Button control (I already mentioned above that FileUpload control does not provide auto Post Back ) .Your code will be look like this:

<asp:FileUpload ID="fileUpload1" runat="server" />
<asp:Button ID="btnUplaod" runat="server" Text="Upload" />

Client Side Validation:

Add a CustomValidator to implement FileUpload validation on client side. Possible implementation could be with code like this:

<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateFileUpload"
ErrorMessage="Select only valid .jpg or .gif file"></asp:CustomValidator>
<script language="javascript" type="text/javascript">


function ValidateFileUpload(Source, args)
{
  var Data = document.getElementById('<%= fuData.ClientID %>');
  var FileUploadPath = Data.value;

  if(FileUploadPath =='')
  {
  
    args.IsValid = false; // There is no file selected
  }
  else
  {
    var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

    if (Extension == "jpg" || Extension == "gif")
    {
      args.IsValid = true; // file type is valid
    }
    else
    {
      args.IsValid = false; // file type is not valid
    }
   }
}</script> 

When we tries to upload wrong file type or FileUpload have empty value, CustomValidator will return an error message “Select only valid .jpg or .gif file” that we mentioned in ErrorMessage property of CustomValidator.

Server Side Validation: 

Due to security reasons, we also need to validate FileUpload control on server side too. We can use the same idea like for client side validation. In this case, just use OnServerValidate event, like in code bellow:

Update your CustomValidator with OnServerValidate option as give below

<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateFileUpload"

ErrorMessage="Select only valid .jpg or .gif file"

OnServerValidate =” CustomValidator1_ServerValidate”>

</asp:CustomValidator>

Then add following code in code behind:
protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    // Get file name
    string uploadFileName = Data.PostedFile.FileName;

    if(uploadFileName == "")
    {
      // There is no file selected
      args.IsValid = false;
    }
    else
    {
        string Extension = UploadFileName.Substring(UploadFileName.LastIndexOf('.') + 1).toLower();

        if (Extension == "jpg" || Extension == "gif")
        {
          args.IsValid = true; // Valid file type
        }
        else
        {
          args.IsValid = false; // Not valid file type
        }
    }
}