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.

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.