Friday, January 4, 2008

Building AJAX Enabled File Uploading System with Progress Bar Using ASP.NET 2.0

In order to use AJAX in ASP.NET we need to have a minimum of ASP.NET 2.0 Framework and AJAX Extensions 1.0 for ASP.NET.

In order to upload a file using AJAX, we are in need of the following main Web Server controls:

1. FileUpload Server Control

2. Button Server Control

Apart from the above, we need to specify the usual AJAX tags ScriptManager, UpdatePanel and ContentTemplate so that during run time the ASP.NET AJAX will know which section of the web page needs to be updated. Let us take a look at the code which uses the above:

<%@ Page Language="C#" AutoEventWireup="true"%>
<html>
<head>
<script runat="server">
protected void UploadFile(object src, EventArgs e)
{
if (myFile.HasFile)
{
   string strFileName;
   strFileName = myFile.FileName;
   myFile.PostedFile.SaveAs(Server.MapPath(".") + "//" + strFileName);
}
}
script>

<script language="javascript" type="text/javascript">
function showWait()
{
if ($get('myFile').value.length > 0)
{
   $get('UpdateProgress1').style.display = 'block';
}
}
script>
<title>File Uploadtitle>
head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <Triggers>
       <asp:PostBackTrigger ControlID="btnUpload" />
   Triggers>
   <ContentTemplate>
       <asp:FileUpload ID="myFile" runat="server" />
       <asp:Label ID="lblMsg" runat="server">asp:Label>      
       <br />
       <asp:Button ID="btnUpload" runat="server" Text="Upload"
           OnClick="UploadFile" OnClientClick="javascript:showWait();"/>     
       <asp:UpdateProgress ID="UpdateProgress1" runat="server"
           AssociatedUpdatePanelID="UpdatePanel1">
           <ProgressTemplate>
               <asp:Label ID="lblWait" runat="server" BackColor="#507CD1"
                   Font-Bold="True" ForeColor="White"
                   Text="Please wait ... Uploading file">asp:Label>
           ProgressTemplate>
        </asp:UpdateProgress>
    </ContentTemplate>
 </asp:UpdatePanel>
 </form>
 </body>
 </html>

1 comment:

  1. Thank you for the article. It has a good point on how to popup progress bar. Unfortunately the proposed solution does not work because myFile.HasFile will always return false. It happens because FileUpload postback synchronously while UpdatePanel sends asynchronous postback.

    ReplyDelete