BeanSoftware Logo
 

 
ASP.NET Database Search Control
 
 

 
 Home
    Shop
    Advertise
    Write For Us
    Affiliate
    Newsletter
    Contact

FileUpload Control Validation

With FileUpload control you can receive files from your web application users. Often, you don't want to receive all file types, but only specific extensions (e.g. images only) depending of your application requirements. Unfortunately, FileUpload control still have not some Filter property like Open and Save File dialogs in .NET Windows Forms to limit file types. Because of that, you need to write some additional code to be sure that user will upload regular file type.

Let say you have two web controls on web form, on FileUpload Control to select a file and one button control, like in image bellow:

FileUpload Control on web form
Image 1: FileUpload and Button on web form

Because in ASP.NET we have client and server side, validation could be done on client and on server. You need to have server side validation because of security reasons, but you 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 .xls or .xml files.

FileUpload Control client side validation

You can use CustomValidator to implement FileUpload validation on client side. Possible implementation could be with code like this:

<asp:FileUpload ID="fuData" runat="server" />
&nbsp;<asp:Button ID="btnUpload" runat="server" Text="Upload" />
<br />
<asp:CustomValidator ID="CustomValidator1" runat="server"
 ClientValidationFunction="ValidateFileUpload" ErrorMessage="Please select valid .xls or .xml file"></asp:CustomValidator>
<script language="javascript" type="text/javascript">
function ValidateFileUpload(Source, args)
{
  var fuData = document.getElementById('<%= fuData.ClientID %>');
  var FileUploadPath = fuData.value;
 
  if(FileUploadPath =='')
  {
    // There is no file selected
    args.IsValid = false;
  }
  else
  {
    var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
 
    if (Extension == "xls" || Extension == "xml")
    {
      args.IsValid = true; // Valid file type
    }
    else
    {
      args.IsValid = false; // Not valid file type
    }
   }
}
</script> 

 

If visitor tries to upload wrong file type or FileUpload have empty value, CustomValidator will return an error message, like in image bellow:

Error message is shown if FileUpload control have incorrect value
Image 2: Error message is shown

FileUpload Control server side validation

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

[ C# ]

 protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
    // Get file name
    string UploadFileName = fuData.PostedFile.FileName;
 
    if(UploadFileName == "")
    {
      // There is no file selected
      args.IsValid = false;
    }
    else
    {
        string Extension = UploadFileName.Substring(UploadFileName.LastIndexOf('.') + 1).toLower();
 
        if (Extension == "xls" || Extension == "xml")
        {
          args.IsValid = true; // Valid file type
        }
        else
        {
          args.IsValid = false; // Not valid file type
        }
    }
}

[ VB.NET ]

Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
  ' Get file name
  Dim UploadFileName As String = fuData.PostedFile.FileName
 
  If UploadFileName = "" Then
    ' There is no file selected
    args.IsValid = False
  Else
    Dim Extension As String = UploadFileName.Substring(UploadFileName.LastIndexOf(".") + 1).ToLower()
 
    If Extension = "xls" Or Extension = "xml" Then
      args.IsValid = True ' Valid file type
    Else
      args.IsValid = False  ' Not valid file type
    End If
  End If
End Sub

 

Now is your FileUpload Control protected on client and server side. I hope you found this tutorial helpful.
Happy programming!



Related articles:

1. Solving "Image Not Found" Problem In GridView

FAQ toolbar: Submit FAQ  |  Tell A Friend  |  Add to favorites  |  Feedback



Copyright © 2002-2008 Bean Software. All rights reserved.