Click here to Skip to main content
13,458,194 members
Click here to Skip to main content
Add your own
alternative version


43 bookmarked
Posted 16 Mar 2009

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

, 18 Mar 2009
Rate this:
Please Sign up or sign in to vote.
ASP.NET - Upload File with Loading Image appears after Start Uploading


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:

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

          //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:

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

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:

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: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 :

//Call JavaScript function to hide progress bar image
                                                , @"CloseProgressbar",
                                                @"HideProgress();", true);


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


About the Author

Malik Hassan
Software Developer Readify
Australia Australia
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralHelpful Pin
adnandeura24-Aug-12 5:20
memberadnandeura24-Aug-12 5:20 
GeneralMy vote of 1 Pin
pramodraising7-Feb-12 20:20
memberpramodraising7-Feb-12 20:20 
GeneralAccess Iframe in User Control Pin
savitabsn@gmail.com6-Aug-10 2:50
membersavitabsn@gmail.com6-Aug-10 2:50 
General"ProfileName.doc" Pin
Danoutsos2-Dec-09 16:26
memberDanoutsos2-Dec-09 16:26 
With your code whatever i upload it is saved as "ProfilName.doc" right?I want to upload only photos..what should i change in your code?
Very nice indeed!!
GeneralRe: "ProfileName.doc" Pin
96problems22-Jan-10 22:31
member96problems22-Jan-10 22:31 
GeneralNice article Pin
Member 381537515-Jun-09 10:04
memberMember 381537515-Jun-09 10:04 
Generalnice article Pin
Donsw19-Apr-09 12:35
memberDonsw19-Apr-09 12:35 
GeneralThanks Pin
DungVinh16-Apr-09 21:46
memberDungVinh16-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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180323.1 | Last Updated 19 Mar 2009
Article Copyright 2009 by Malik Hassan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid