在更新面板中显示带有文件上传的进度更新

Question

I am developing a website in asp.net using VS2013 and C# (webforms). I have a page that accepts some user input, including an <asp:FileUpload> server control. The entire form is inside an update panel, allowing me to display a progress update div that pops up when the user submits the form.

I have read that having a file upload server control inside an update panel causes issues, so I am using a <asp:PostBackTrigger> to force a postback so that the upload control's .HasFile property is not always false.

Throughout the site, when there is a delay due to DB activity, I use <asp:UpdatePanel> and <asp:UpdateProgress> to show the user that there is some activity and to protect the form from being altered or resubmitted once the user hits submit. It works fine.

The problem is that the <asp:PostBackTrigger> is also preventing the <asp:UpdateProgress> from appearing. This leaves the form vulnerable to unwanted user input after submission, and is also a bad user experience. So I am in a catch22 - I cannot remove the PostBackTriggers because then the file upload control won't work, and I cannot use the UpdateProgress on submit because the PostBackTriggers prevents it from showing.

Some code:

 <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <%-- Some irrelevant code left out --%> <div class="row"> <div class="input-group col-sm-6"> <span class="input-group-addon" style="width: 175px; text-align: right;" id="basic-addon10">Signature</span> <asp:FileUpload ID="uplSignature" runat="server" CssClass="form-control" /> </div> <%-- Some irrelevant code left out --%> </ContentTemplate> <Triggers> <asp:PostBackTrigger ControlID="btnSubmit" /> </Triggers> <asp:UpdateProgress ID="UpdateProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0"> <ProgressTemplate> <div class="updateProgressMain" style="position: fixed;"> <div class="updateProgressDiv" style="position: fixed;"> <img src="Images/loader.gif" alt="" /> </div> </div> </ProgressTemplate> </asp:UpdateProgress> 

What would be the best way to resolve this?

Thanks for the help in advance.

EDIT - I accepted the use of the Ajax File Upload Control from the Ajax Control Toolkit as the answer because it did actually work to solve my problem. I am not thrilled with it because I am finding it hard to style to match the look and feel of my site - but it does work. Thanks for the suggestion.

Answer 1

I would take a look at the AjaxFileUpload control that is shipped with the Ajax Control Toolkit.

I had a similar issue previously and remember that the ajax one worked for me.

You can find some info about it here: https://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx

To get the Ajax Control Toolkit just search for it in NuGet.