How to restrict file types in File Upload?

Introduction
              You have to use Regular Expression to restrict the File types from being uploaded.Here I am going to show how to restrict it.

<asp:RegularExpressionValidator ID="rev" runat="server" ControlToValidate="fuupload" ValidationExpression="^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.txt|.TXT|.xls|.XLS)$" ErrorMessage="Only Image File are allowed."></asp:RegularExpressionValidator>

If above method is not working for Image File then Please use Below.its working well in all browser.

<asp:RegularExpressionValidator ID="rev" runat="server" ControlToValidate="fuupload" ValidationExpression="(.*\.([gG][iI][fF]|[jJ][pP][gG]|[jJ][pP][eE][gG]|[bB][mM][pP])$)" ErrorMessage="Only Image File are allowed."></asp:RegularExpressionValidator>

FileUpload Progress bar using Ajax

Introduction:
                  I explained in my Previous Post about AjaxMaskEdit  in http://www.aspdotnetbank-kartik.blogspot.in/2012/02/ajax-maskedit-for-date-validator.html.Now in this Post I am going to explain you about Progress bar using Ajax AsyncFileUpload while FileUpload.

I am Going to show how to use Progressbar while Uploading the File.Here I am Going To Upload file Using FileUpload and while Uploading the File It will show you the Progress bar.First You have to add the AjaxtToolkit as a Reference.and also add the Images Folder inside Project.

Lets Look at .aspx code

Add above <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<head runat="server">
    <title>Example Of Progressbar</title>
    <script type="text/javascript">
        // This function will execute after file uploaded successfully
        function uploadComplete() {

            document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
        }
        // This function will execute if file upload fails
        function uploadError() {
            document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <ajax:ToolkitScriptManager ID="scriptManager1" runat="server"/>
        <ajax:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError"
            CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Traditional"
            UploadingBackColor="#CCFFFF" ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" />
        <br />
        <asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
        <br />
        <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>

If you Look at above code UploaderStyle="Traditional" in that there are two option "Morden" and "Traditional" both have different Look for FileUploader.Here i have used Traditional.while OnUploadedComplete="fileUploadComplete" specify the Method for Uploading code in aspx.cs Page.

Now Lets Look at aspx.cs Page code : You have to just the Method fileUploadComplete in aspx.cs page.

using System.Threading;
using AjaxControlToolkit;

 protected void fileUploadComplete(object sender, AsyncFileUploadEventArgs e)
 {
            Thread.Sleep(5000);
            string filename = System.IO.Path.GetFileName(fileUpload1.FileName);
            fileUpload1.SaveAs(Server.MapPath("Images/") + filename);
  }
Here I have used Thread.Sleep Method Because If you are Going to Upload the small file then also you can see the Progress bar.Thread.Sleep(5000) will suspend the execution of code for 5 second.


Note:If your aspx Page uses any master page then specify the attribute ClientIDMode="AutoID" in <ajax:AsyncFileUpload ....> Tag


Demo:

Download the Sample Code from Here