Click here to Skip to main content
Click here to Skip to main content
Go to top

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

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:

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:

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

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

Share

About the Author

Malik Hassan
Technical Lead E-Pulse for electronic solutions - Amman,Jordan
Jordan Jordan
No Biography provided

Comments and Discussions

 
GeneralHelpful Pinmemberadnandeura24-Aug-12 5:20 
GeneralMy vote of 1 Pinmemberpramodraising7-Feb-12 20:20 
GeneralAccess Iframe in User Control Pinmembersavitabsn@gmail.com6-Aug-10 2:50 
General"ProfileName.doc" PinmemberDanoutsos2-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" Pinmember96problems22-Jan-10 22:31 
GeneralNice article PinmemberMember 381537515-Jun-09 10:04 
Generalnice article PinmemberDonsw19-Apr-09 12:35 
GeneralThanks PinmemberDungVinh16-Apr-09 21:46 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 19 Mar 2009
Article Copyright 2009 by Malik Hassan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid