Ajax Async file upload Does not Fire server side event

Question

<asp:UpdatePanel runat="server" ID="SaveLocalConnectionupdate" UpdateMode="Conditional">
        <ContentTemplate>                       
             <ajaxToolkit:AsyncFileUpload runat="server" ID="AsyncFileUpload1" OnUploadedComplete="AsyncFileUpload1_Complete"/>
             <asp:LinkButton CssClass="btn btn-sm btn-success" Text="Save Connection" runat="server" Style="cursor: pointer;" ID="Savelocalconnection" OnClick="UploadBtn_Click" OnClientClick="return SavelocalS3ConDetails()" ></asp:LinkButton>
        </ContentTemplate>                       
</asp:UpdatePanel>

 protected void AsyncFileUpload1_Complete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    if (AsyncFileUpload1.HasFile)
    {
        string path = Config.root_path + "s3_localfile\\" + AsyncFileUpload1.FileName;
        AsyncFileUpload1.SaveAs(path);
        string fileType = Path.GetExtension(path);
        Localfilelabel.Text = "File Uploaded: " + AsyncFileUpload1.FileName;
        LocalfilelabelUpdate.Update();

    }
    else
    {
        Localfilelabel.Text = "No File Uploaded.";
        LocalfilelabelUpdate.Update();
    }
}

Here server side function doesn't fire. I want to implement file uploading without a full postback, This is my markup and server-side function.

Answer 1

Ok, let's give this a try:

A few things first however:

Since the async upload does not post-back, then you don't need an update panel, do you?

Keep in mind that update panels DO NOT prevent a post back, but allow you to do what is called a partial page post back. So, while the update panel LOOKS like it not doing a post back, it in fact does, and in fact you find that EVEN the page load event will trigger, and trigger every time EVEN when using an update panel. In other words, update panels do NOT prevent post backs.

However, the AsyncFileUpload does not post back, but then you have this code:

Localfilelabel.Text = "No File Uploaded.";

How would the above be possible? The web page and markup are STILL on the user’s desktop and has not been posted. That means for ANY code that does not post-back, then such code can NEVER modify controls on the web page, since you never had or allowed a post-back to occur. If no post-back is to occur, then you can NOT modify controls, since the web page and controls are still sitting on the user's desktop, and have not been sent to the sever. And since the markup and content has not been sent to the server, then such code cannot modify controls on the web page, since the web page not been sent to the server. (and worse yet, the web page not going to be sent back to the client side, so your code to change a text box, or label can't be used). You have to use client-side code to update that label.

And we leave alone your Linkbutton code, but it is VERY but BEYOND VERY unclear why the event stub name does not match the link button and of course you don't show the course client-side code. (but, let's take one issue at a time here).

So, the markup for the upload control to work is going to be this:

<ajaxToolkit:AsyncFileUpload runat="server" 
    ID="AsyncFileUpload1" 
    OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
/>

Since the above control DOES NOT and WILL not post back, then little need exists to place this code inside of an update panel.

So, with above, then code behind can be:

   protected void Page_Load(object sender, EventArgs e)
   {
       if (!IsPostBack)
       {
       }

   }


   protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
   {
       if (AsyncFileUpload1.HasFile)
       {
           // string path = Config.root_path + "s3_localfile\\" + AsyncFileUpload1.FileName;
           string sFile = Server.MapPath(@"~/UpLoadedFiles/" + e.FileName);
           AsyncFileUpload1.SaveAs(sFile);

       }
   }

Now the above code should work just fine.

So, we CAN drop/place/have the above control inside of an update panel, but it NOT going to help much, since the async upload control DOES NOT post back and that means that we can NOT modify controls on the web page in that code stub, since as noted, THE WHOLE IDEA HERE is to NOT HAVE a post back. And without a post-back, then you can NOT modify controls on the web page in that code stub. You also cannot get/grab/see/know/enjoy use of ANY control on the web page in that code stub, since once again, the WHOLE IDEA IS TO NOT post back the page to the server. And as noted, without the post-back, then you can't change, or see or modify or touch or see the value of ANY control on that web page, since it is STILL SITTING on the user’s desktop, and no post back has occurred, right?

Keep in mind that the full-page markup we have so far is this:

So, let's modify the code a wee bit to see if it runs:

We have:

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        if (AsyncFileUpload1.HasFile)
        {
            // string path = Config.root_path + "s3_localfile\\" + AsyncFileUpload1.FileName;
            string sFile = Server.MapPath(@"~/UpLoadedFiles/" + e.FileName);
            AsyncFileUpload1.SaveAs(sFile);

            Debug.Print("file upload code done - file save = " + sFile);
        }
    }

So, now, let's run this code. As I stated, the update panel in this example (so far) does not matter, is not being used, does not come into play, and is moot extra markup at this point in time.

So, we have so far this markup:

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel runat="server" ID="SaveLocalConnectionupdate" 
        UpdateMode="Conditional">
            <ContentTemplate>                       

            <ajaxToolkit:AsyncFileUpload runat="server" 
                ID="AsyncFileUpload1" 
                OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
            />

            <asp:LinkButton CssClass="btn btn-sm btn-success" 
                Text="Save Connection" runat="server" 
                Style="cursor: pointer;" ID="Savelocalconnection" 
                OnClick="UploadBtn_Click" OnClientClick="return SavelocalS3ConDetails()" >
            </asp:LinkButton>


            </ContentTemplate>                       
        </asp:UpdatePanel>


</form>

And the result when we run is this:

So, there is no browser "wait" or spinner. and there is no page post back.

So, the above code works just fine for me.

Create a test page. Drop in an async file upload control, and get it working.

As noted, the above (so far) does not require an update panel, since the whole idea of an async upload control is to NOT post back the page, and thus there is no post back, but keep in mind this means that the code stub for that async up-load cannot modify or touch or see controls on the web page, since the web page is still sitting on the user's desktop without a post back.

So, start the page without any thing else except the script manager (required), and then the one up-load control.

Also, test with a really small file, then try with a larger file. Also, as above shows, I did use a debug.print to help with debugging, and that shows the server-side event code stub was and does and is running.