Simulate UpdateProgress when Using ASP.NET FileUpload Control

[UPDATE] For those who complain that my example is not working, it is most likely because you don’t know CSS very well. Here are things you need to check if you try to follow my example:
1. Do NOT use UpdatePanel
2. Make sure your image “src” is pointing to your loading gif file. You cannot just copy and paste my code and expect the image to show up
3. Add the following two CSS classes in your CSS file

.PopupBackground
{
position: fixed;
top: 0;
left: 0;

background-color:#666;
/* uncomment the following two lines
to create a transparent layer
*/
filter:alpha(opacity=95);
opacity:0.95;

height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
z-index: 10000000;
}

.Popup
{
background-color: #ffffff;
color: black;
width: 650px;
margin:auto;
text-align: left;
vertical-align: middle;
position: fixed;
top: 10%;
left: 25%;
min-height:300px;
font-weight:bold;
max-height:650px;
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

When you use ASP.NET FileUpload control to upload a large file, you should give your users some feedback, say “Uploading, please wait”, so your user will not sit there wondering if the upload is actually working or not. Naturally you may think of using AJAX UpdateProgress control to display such feedback message, but unfortunately it would not work. The reason is that you will have to use UpdatePanel in order to use UpdateProgress, but the UpdatePanel.control is not compatible with the FileUpload control, so you cannot use UpdateProgress to display feedback message when using the FileUpload control.

In this post, I will show you how to use JavaScript to simulate the UpdateProgress control to display a feedback message to user when using the FileUpload control.

FileUploadUI

FileUploadFeedback

The basic idea is to use an ASP.NET hidden field to store the file upload status, for instance, value = 1 means the file upload is finished and value = 0 means the file upload is in progress. Then use a JavaScript function to repetitively check the value of the hidden field and display the feedback message as above until the value of the hidden field has changed to 1.

<asp:Panel ID="pnlBackGround" runat="server" CssClass="PopupBackground" Style="display: none;">
    <div id="divFeedback" runat="server" class="Popup" style="text-align: center;">
        <div class="div-clear">
        </div>
        <img src="../../App_Themes/Default/Images/loading_animation.gif" alt="Loading" />
        <div>
            Uploading file, please wait...</div>
        <div class="div-clear">
        </div>
    </div>
</asp:Panel>

Here is the JavaScript function:

   1: <script language="javascript" type="text/javascript">

   2:     function displayProgress() {

   3:         var hdn = document.getElementById('<%=hdnStatus.ClientID%>');

   4:         var div = document.getElementById('<%=pnlBackGround.ClientID %>');

   5:         if (div != null) {

   6:             var feedback = document.getElementById('<%=divFeedback.ClientID%>');

   7:             if (hdn.value != 1) {

   8:                 feedback.innerHTML = "<img src='../../App_Themes/Default/Images/loading_animation.gif' /><div>Uploading file, please wait...</div>";

   9:                 div.style.display = "block";

  10:                 setTimeout("displayProgress()", 1000);

  11:                 return true;

  12:             }

  13:             else {

  14:                 div.style.display = "none";

  15:                 return true;

  16:             }

  17:         }

  18:         else {

  19:             return true;

  20:         }

  21:     }

  22: </script>

From line 4 to 8, the JavaScript reloads the user feedback message and picture, but you can remove those lines if your feedback picture is not animated.

In the code-behind event handler when the Upload button is clicked and the file upload is finished, just change the value of the hidden value to 1, so the JavaScript will detect the change and hide the feedback message:

this.hdnStatus.Value = "1";

If you want to use RequiredFieldValidator, just make sure to turn off the client side validation and use only the server side validation. If the validation is passed, then proceed to processing the file upload; otherwise, change the value of the hidden field to 1 so the JavaScript will not display the feedback message.

   1: if (Page.IsValid)

   2: {

   3:     // Process file upload

   4: }

   5: else  // Validation failed

   6: {

   7:     this.hdnStatus.Value = "1";

   8: }

Please feel free to post your comments or questions here, and I hope this helps someone.

10
Leave a Reply

avatar
8 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
JoseRobertoJeffreyManishVictor Servellon Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Gary
Guest
Gary

Could you provide a complete example. Thank you!

ahmet
Guest
ahmet

how work javascript code… I can not

harold
Guest
harold

thank you, great example, really help me! … works really fine, perfect!

Victor Servellon
Guest
Victor Servellon

Could you provide a complete example. Thank you

Manish
Guest
Manish

Hi. Could you please send me a source code? need a code of CSS which you implemented here…this will really help me.

Roberto
Guest
Roberto

For people with little knowledge like me, this example does not help at all , because without the complete solution was better not to have placed .

Jose
Guest
Jose

To do something incomplete, better avoid losing 2 minutes of your time to publish the article. To me, it did not help me.

Thanks.