Related Posts Plugin for WordPress, Blogger...

About

Follow Us

Thursday, 5 February 2015

Introduction: Validate the file extension before uploading or restrict the user to upload only specific type of files though FileUpload control using javascript and customvalidator validation control.


Description: Sometimes it is required to validate the file extension before uploading file i.e.If you want the user can upload only jpg, jpeg, png, gif, doc, docx, xls, xlsx files then you have to check the extension of the file the user is going to upload.


ImplementationLet's create an asp.net web application to understand.
  • First of all write the JavaScript function to validate file extension in the Head tag of your design page(.aspx) as:
Note: We are creating JavaScript function to validate the file extension and calling that function on theCustomValidator control. So this article also demonstrates the use of CustomValidator control.

<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function ValidateFileUploadExtension(Source, args) {
            var fupData = document.getElementById('<%= FileUpload1.ClientID %>');
            var FileUploadPath = fupData.value;

            if (FileUploadPath == '') {
                // There is no file selected
                alert("Please select file to upload");
            }
            else {
                var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

                if (Extension == "gif" || Extension == "jpeg" || Extension == "jpg"|| Extension == "png" || Extension == "doc" || Extension == "docx" || Extension =="xls" || Extension == "xlsx")
                 {
                    args.IsValid = true; // Valid file type
                }
                else {
                    args.IsValid = false; // Not valid file type
                }
            }
        }
</script>
</head>

Source Code
  • Place a FileUpload control on design page(.aspx)
  <asp:FileUpload ID="FileUpload1" runat="server" />
  <asp:CustomValidator ID="CustomValidator1" runat="server"
 ClientValidationFunction="ValidateFileUploadExtension" ErrorMessage="Please select valid gif/jpeg/jpg/png/doc/docx/xls/xlsx file" Font-Size="16px" ForeColor="red"></asp:CustomValidator>

<asp:Button ID="btnUpload" runat="server"  Text="upload"
            onclick="btnUpload_Click" />

C#.Net Code to Validate file extension and upload image using cutomvalidator
  • In the code behind (.aspx.cs) file write the code:
    protected void btnUpload_Click(object sender, EventArgs e)
    {
            //write code to upload file
            string filePath = (Server.MapPath("Uploads/") + Guid.NewGuid() + FileUpload1.PostedFile.FileName);
            FileUpload1.SaveAs(filePath);
    }

VB.Net Code to Validate file extension and upload image using cutomvalidator
  • In the code behind (.aspx.vb) file write the code:
Protected Sub btnUpload_Click(sender As Object, e As EventArgs)     
                                         'write code to upload file
                                         Dim filePath As String = (Server.MapPath("Uploads/") + Guid.NewGuid() + FileUpload1.PostedFile.FileName)
                                         FileUpload1.SaveAs(filePath)                   
End Sub


 Note: In this example Uploaded file will be saved in the Uploads folder.

0 comments:

Post a Comment