AsyncFileUpload postback causes double loading

Question

I implemented the AsyncFileUpload control in a webpage. This web page requires that downloaded files appear in the GridView .
GridView contains the following columns: “File Name”, “Confidential” check box, and the “Delete” button to delete the downloaded file.

Since postback AsyncFileUpload does not AsyncFileUpload on the full page, I need to "force" send a message to the OnClientUploadComplete event of the OnClientUploadComplete control to display the gridview after the file is uploaded.
In OnClientUploadCompleteEvent I use javascript to call __doPostBack . In this postback, I only link the GridView and display the file information (I do not save the file again).

Problem: In the first partial back of AsyncFileUpload file loaded successfully, as expected. In the second postback, which I force with __doPostBack , the file is reloaded.
You can verify this using Google Chrome, which displays the progress of the download. The behavior is as follows:
- After selecting the file, the progress increases from 0% to 100% and the file is downloaded.
- After that, __doPostBack is __doPostBack , and you can again see an increase in the load volume from 0% to 100%.

How can I make sure that the gridview is filled correctly, but that the file does not load twice?

I have attached a sample solution that contains the problem: https://www.yousendit.com/download/MzZFc2ZBNDRrYUN4dnc9PQ

Answer 1

Maybe ugly, but it works:

---

1) Add a css-hidden asp: button at the bottom of asp: AsyncFileUpload AsyncFileUpload1 .

 <asp:Button runat="server" ID="btnClick" Text="Update grid" style="display:none"/> 

2) In the Page_Load method, remove if (Request.Params.Get("__EVENTTARGET") == "UploadPostback") and put its block in a simple else in the previous if .

3) In the AsyncFileUpload1_UploadedComplete function AsyncFileUpload1_UploadedComplete also delete the line if (Request.Params.Get("__EVENTTARGET") != "UploadPostback") , but leave everything inside it intact.

4) Back to aspx. Place asp: UpdatePanel outside the grid of GridView1.

 <asp:UpdatePanel runat="server" UpdateMode="Conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" /> </Triggers> <ContentTemplate> <asp:GridView ID="GridView1" ... YOUR GRID CODE REMAINS THE SAME </asp:GridView> </ContentTemplate> </asp:UpdatePanel> 

5) The final step is to change the javascript function on the client side of AjaxUploadComplete to call the postback function. Replace it with the following:

 function AjaxUploadComplete() { var btnClick = document.getElementById("btnClick"); btnClick.click(); } 

---

Any file that the user selects is downloaded only once.
All changes here must be made in AjaxUpload.aspx and AjaxUpload.aspx.cs of your AjaxUpload.zip.

Answer 2

There is a simpler solution.

@@ t0x1n3 The solution u itself is given very simply, but it does not work

surrounds AsyncFileUpload with the name of the UpdatePanelAFU update panel, then in UpdatePanelAFU do the following:

  protected void AsyncFileUpload_UpdatePanelAFU(object sender,AjaxControlToolkit.AsyncFileUploadEventArgs e) { if (Request.Params.Get("__EVENTTARGET") != "UpdatePanelAFU") return; ..... rest of the code } 

enjoy it!

Answer 3

AsyncFileUpload has a property called IsUploading . if this property is set to false, a postback will occur. you can check this property as follows:

 if(AsyncFileUpload1.IsUploading) { ..... upload codes } 

Answer 4

I believe that @Veera is all right. UploadComplete is called several times as the file loads. The following worked for me.

 void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e) { if (AsyncFileUpload1.IsUploading) return; // rest of your upload code } 

Answer 5

I do not have access to your sample solution that contains the problem, but I am facing double postback in my project with the AsyncFileUpload component. I found a very simple way:

Just add:

 private bool justUploaded = false; 

Then:

 void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e) { if (justUploaded) return; justUploaded = true; // rest of your upload code } 

Answer 6

I find this a more elegant solution, which can be found here: http://forums.asp.net/t/1951566.aspx?AsyncFileUpload+uploads+twice ), but below is my modified fully working code:

 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AsyncFileUpload Example</title> <script type = "text/javascript"> function uploadComplete(sender) { $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully"; clearContents(); } function uploadError(sender) { $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed."; clearContents(); } function clearContents() { var span = $get("<%=AsyncFileUpload1.ClientID%>"); var txts = span.getElementsByTagName("input"); for (var i = 0; i < txts.length; i++) { if (txts[i].type == "text") { txts[i].value = ""; } if (txts[i].type == "file") { txts[i].value = ""; } } } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:AsyncFileUpload OnClientUploadError="uploadError" OnClientUploadComplete="uploadComplete" runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" EnableViewState = "false" UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnUploadedComplete = "FileUploadComplete" /> <asp:Image ID="imgLoader" runat="server" ImageUrl = "~/images/loader.gif" /> <br /> <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label> </form> </body> </html>