Monday, June 19, 2017

Asp.net Fileupload control

In this article I am going to explain about Asp.net Fileupload control.


Description:
We use the Fileupload control to upload the files. Here I am going to explain all about Fileupload control like how to set file type, validate file type, file size etc.
 Implementation:

Fileupload control have option to set which type of file you want to upload. In this example I want to upload PDF file, so I have set accept property only PDF files. When we will going to upload files it will show only PDF files.

Example:
<asp:FileUpload ID="FileUpload1" runat="server" accept=".pdf"/>

If want to upload images in that case set accept=".jpg,.png,.gif,.jpeg"

Validate Fileupload Control:
To validate upload control I am using require filed and regular expression validation control.
Validation Expression to validate PDF file :  ValidationExpression="^.*\.(pdf)$"
If want to validate more file types set file extension in validation expression. E.g. accept="^.*\.(jpg|JPG|gif|GIF|doc|DOC|DOCX)$"

Example:

<table>
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false"/>
            <tr><td>Upload File :</td><td><asp:FileUpload ID="FileUpload1" runat="server" accept=".pdf"/>
                <asp:RequiredFieldValidator ID="rfvfileupload" runat="server" Display="None" ErrorMessage="Please upload File" ControlToValidate="FileUpload1"></asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="regexfileupload" runat="server" Display="None" ErrorMessage="Please upload only PDF file" ValidationExpression="^.*\.(pdf)$" ControlToValidate="FileUpload1"></asp:RegularExpressionValidator></td></tr>
             <tr><td></td><td> <asp:Button ID="Button1" runat="server" Text="Save" /></td></tr>
        </table>


Validate File size
We can validate the file size using jquey (client side) or using code (server side). I want to upload upto 1 MB file.

Here is Jquery function:

<script type="text/javascript" >
     function ValidateFilesize() {
         var maxFileSize = 1096000;
         var uploadedFile = document.getElementById("<%=FileUpload1.ClientID %>");
         if (uploadedFile.files[0].size > maxFileSize)
          {
             alert('File size should be less than 1MB')
             return false;
          }        
          return true;
      }
   </script>


Complete HTML Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <script type="text/javascript" >
     function ValidateFilesize() {
         var maxFileSize = 1096000;
         var uploadedFile = document.getElementById("<%=FileUpload1.ClientID %>");
         if (uploadedFile.files[0].size > maxFileSize)
          {
             alert('File size should be less than 1MB')
             return false;
          }        
          return true;
      }
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr><td>Upload File :</td><td><asp:FileUpload ID="FileUpload1" runat="server"/> </td></tr>
            <tr><td></td><td> <asp:Button ID="Button1" runat="server" Text="Save" OnClientClick="return ValidateFilesize();"  OnClick="Button1_Click" /></td></tr>
        </table>
    </div>
    </form>      
</body>
</html>


To validate on button click write the below given code

C# code:
protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.FileBytes.Length > 1096000)
        {
            //Show message File size should be less than 1MB
        }
        else
        {
           //save File
        }
    }

VB.net Code:

Protected Sub Button1_Click(sender As Object, e As EventArgs)
        If FileUpload1.FileBytes.Length > 1096000 Then
                    'Show message File size should be less than 1MB
        Else
'save File
        End If
    End Sub


Output :
Asp.net Fileupload control


No comments:

Post a Comment