Click here to Skip to main content
15,860,972 members
Articles / Web Development / ASP.NET

ASP.NET - Upload File With Loading Image using JavaScript and C#

Rate me:
Please Sign up or sign in to vote.
4.38/5 (16 votes)
18 Mar 2009CPOL2 min read 100.6K   4.4K   43   8
ASP.NET - Upload File with Loading Image appears after Start Uploading

Introduction

Many times when we use FileUpload control, we want to upload the submitted file using AJAX behaviour, so we don't want to post all the page back to the server. Moreover, we want to show a loading image when we are uploading the file. This article discusses how we can do that.

Using the Code

So, how we can do that? First, we will create an ASPX page (FileUpload.aspx). This page will contain many controls, but the most important ones are:

  1. FileUpload control
  2. Button control

The code behind for this page will be a normal code to save the file when the button is clicked:

C#
protected void btnUpload_Click(object sender, EventArgs e)
{   
          //Get the root folder from web config.
          string rootFolder = ConfigurationManager.AppSettings["RootFolder"].ToString();

          //Get the full file path which we will use to save the file.
          string fileName = rootFolder + @"ProfileName.doc";

          //Save the file on the specified path
          FileUpload1.SaveAs(fileName);

          //Hide the upload panel
          pnlUpload.Visible = false;

          //View message to notify the user that his/her file has been uploaded.
          pnlAfterUpload.Visible = true;

}

It's easy right? Well, after that, what we need is to create another page (Default.aspx). There is no code in this page. In the HTML, we will add an iframe, the source attribute value for this iframe is FileUpload.aspx page. We will also add an image tag for the loading image in the HTML, as follows:

HTML
<div  style="border-width:1px;border-bottom-style:solid;border-color:#F3F3F3">
        <iframe id="iUploadFile" frameborder="0" src="IFrame/FileUpload.aspx">
        
        </iframe>
     <img id="imgLoading" src="Images/loading.gif" style="display:none" />
</div>

The final step now is to modify our code to show the image and hide the iframe when the submit button in the FileUpload.aspx is clicked, and to hide the image and show the iframe again when uploading the file finish. To get that, we have to add the following JavaScript functions to the (FileUpload.aspx) page:

JavaScript
function HideProgress()
{
    parent.document.getElementById("imgLoading").style.display= 'none';
    parent.document.getElementById("iUploadFile").style.display= 'block';
}
function ShowProgress()
{
    parent.document.getElementById("imgLoading").style.display= 'block';
    parent.document.getElementById("iUploadFile").style.display= 'none';
}

Now, all that we need is to call the ShowProgress() function when we click the submit button. To get that, we need to set the OnClientClick property for the button:

ASP.NET
<asp:Button ForeColor="#FFFFFF" BackColor="#00cc00" OnClientClick="ShowProgress();"

Text="Upload Your File" ID="btnUpload" runat="server" OnClick="btnUpload_Click" />

Then we need to call the HideProgress() function when uploading the file finish. We need to add the following line of code at the end of our code which we used to save the file in the code behind for the (FileUpload.aspx) page :

C#
//Call JavaScript function to hide progress bar image
        Page.ClientScript.RegisterStartupScript(this.GetType()
                                                , @"CloseProgressbar",
                                                @"HideProgress();", true);

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer Readify
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralHelpful Pin
adnandeura24-Aug-12 5:20
adnandeura24-Aug-12 5:20 
GeneralMy vote of 1 Pin
pramodraising7-Feb-12 20:20
pramodraising7-Feb-12 20:20 
GeneralAccess Iframe in User Control Pin
savitabsn@gmail.com6-Aug-10 2:50
savitabsn@gmail.com6-Aug-10 2:50 
General"ProfileName.doc" Pin
Danoutsos2-Dec-09 16:26
Danoutsos2-Dec-09 16:26 
GeneralRe: "ProfileName.doc" Pin
96problems22-Jan-10 22:31
96problems22-Jan-10 22:31 
GeneralNice article Pin
Member 381537515-Jun-09 10:04
Member 381537515-Jun-09 10:04 
Generalnice article Pin
Donsw19-Apr-09 12:35
Donsw19-Apr-09 12:35 
GeneralThanks Pin
DungVinh16-Apr-09 21:46
DungVinh16-Apr-09 21:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.