Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Tip/Trick

Showing File Upload Progress to the user using UpdatePanel control in ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.38/5 (8 votes)
17 Dec 2012CPOL2 min read 47.5K   2.8K   13   13
This article describes the working of fileupload inside an updatepanel and showing the file upload progress to the user.

Introduction  

This article describes the working of FileUpload inside an UpdatePanel and showing the file UploadProgress to the user.

Background

AJAX is a playing an important role in ASP.NET developers world, in terms of user experience and responsiveness. There are many scenarios when we have to use FileUpload in a page which have no postbacks. This article describes the working of FileUpload inside an UpdatePanel with UpdateProgress.

The problem is that the FileUpload control does not work with asynchronous postbacks, and therefore does not work from within an AJAX UpdatePanel. This article allows the FileUpload control to work within an UpdatePanel. The example will be a simple web page containing a FileUpload, Image control, Updatepanel, Updateprogress, and a button. We will see that the FileUpload will function inside an UpdatePanel with UpdateProgress.

Using the code

So as per our requirements, we are trying to user file upload control to perform a full postback, and we do this using triggers. Triggers allow the developer to specify what will cause partial and full postbacks. They must be defined within the UpdatePanel but outside of the ContentTemplate. We want to create a trigger that will instruct the button that we are using for the upload to perform a full postback. The updated markup is:

Image 1

C#
protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(2000);
    Label1.Text = "Data Processed Successfully";

}
protected void Upload_Click(object sender, EventArgs e)
{
    if (FU1.HasFile)
    {
        FU1.SaveAs(MapPath("~/Image/" + FU1.FileName));
        System.Drawing.Image img1 = System.Drawing.Image.FromFile(
                         MapPath("~/image/") + FU1.FileName);
        ImageView.ImageUrl = "~/Image/" + FU1.FileName;
    }
}

Now when we click on upload button, The uploaded image will be viewed without having asynchronous postback. After clicking on final submission UpdateProgress will get active and show an processing image and the data get ready for the finalization.

Image 2

Image 3

Point of interest 

In this article we saw how we can put a FileUpload control inside an UpdatePanel to provide the feedback to the user that the file is being uploaded. This is fairly known to a lot of developers but people new to development will find it useful.

History

11 October 2012: First version. 

License

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


Written By
Software Developer
India India
I am a Software Engineer from Bhopal. I started my Career from Programming in ASP and now working as a Web Developer in ASP.Net (C#). I Love coding and always ready to gain new thing and always been towards Microsoft Technologies. Apart from coding my other hobbies are traveling, Internet Surfing, spending time with family and hang out with friends.

http://www.webtekspace.blogspot.in/

Comments and Discussions

 
Questionproblem Pin
gianestras31-May-15 12:33
gianestras31-May-15 12:33 
Questionhelpful Pin
PaulaM7-Feb-14 3:40
PaulaM7-Feb-14 3:40 
GeneralMy vote of 4 Pin
Nandakishore G N29-Jan-13 23:10
professionalNandakishore G N29-Jan-13 23:10 
AnswerRe: My vote of 4 Pin
AshishChaudha30-Jan-13 17:58
AshishChaudha30-Jan-13 17:58 
GeneralA copy? Pin
Doofenshmirtz17-Dec-12 17:48
Doofenshmirtz17-Dec-12 17:48 
AnswerRe: A copy? Pin
AshishChaudha17-Dec-12 19:11
AshishChaudha17-Dec-12 19:11 
GeneralRe: A copy? Pin
Doofenshmirtz17-Dec-12 21:35
Doofenshmirtz17-Dec-12 21:35 
I meant it the other way - is the copy on the other site also yours (because a lot of authors blog in other places too).
Anyway, you seem to have pointed it out to Chris & Co., hopefully they'll sort it out.

AnswerRe: A copy? Pin
AshishChaudha17-Dec-12 21:37
AshishChaudha17-Dec-12 21:37 
QuestionMessage Closed Pin
26-Oct-12 21:23
vinay.Singh26-Oct-12 21:23 
AnswerRe: nice one very nice Pin
AshishChaudha16-Dec-12 22:11
AshishChaudha16-Dec-12 22:11 
Questionmy vote is 5 Pin
zelinaa11-Oct-12 4:40
zelinaa11-Oct-12 4:40 
AnswerRe: my vote is 5 Pin
AshishChaudha11-Oct-12 21:04
AshishChaudha11-Oct-12 21:04 

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.