FileUpload in an Ajax UpdatePanel

In an application I'm developing, most pages have grids and forms that I want to wrap in UpdatePanels.  To simplify this I decided to place the ContentTemplate of the master page in an UpdatePanel so that all pages would get this functionality by default.

This worked fine, until I placed a FileUpload control on one of the pages.  It turns out that FileUpload controls don't work with an asynchronous postback.  These code snippets show how to overcome this.  Read on for a more detailed explanation.

Figure 1:  Add a function to the master page to register arbitrary controls as postback triggers.
public void RegisterPostbackTrigger(Control trigger)
{
  mainScriptManager.RegisterPostBackControl(trigger);
}

Figure 2:  Add a reference to the master page in the user control.
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Products.ascx.cs" Inherits="Controls_Admin_Products" %>
<%@ Reference VirtualPath="~/MasterPage.master" %>

Figure 3:  Register the postback control as a PostBackTrigger.
protected void productsFormView_ItemCreated(object sender, EventArgs e);
{
  Button InsertButton = ((FormView)sender).FindControl("InsertButton") as Button;
  if (InsertButton != null)
    ((ASP.masterpage_master)Page.Master).RegisterPostbackTrigger(InsertButton);
}

My immediate thought was to somehow disable the UpdatePanel, but only for the posts back that use the FileUpload control.  For several reasons, this turned out to be a bit tricky.  Initial research showed that I could declare the control initiating the postback as a PostBackTrigger in the UpdatePanel's Triggers collection during design time.  There are two problems with this:

  1. The UpdatePanel is defined on the master page, but the Button initiating the postback is defined inside a user control that's included in a page that uses the master page.
  2. In my case, the Button is in either a FormView, or a GridView and its ID isn't available during design time.

Master pages are actually implemented as child controls of the pages that use them.  I knew that I could register a master page with its parent page with the @ MasterType directive, and then access members of the master page with the Master.<member> syntax.  I didn't know how to do this with a user control.  I found that this is done with the @ Reference directive. (see Figure 2 above)

As you can see in Figure 3, above, you access the reference from the user control with ASP.masterpage_master and use that to cast the Master property of the user control's parent page as the correct master page type.  Then, the members of the master page are directly accessible to the user control.

Now that I could access the master page's members from the user control, I tried, unsuccessfully, to add the postback button to the UpdatePanel's collection of triggers using this syntax:

PostBackTrigger trigger = new PostBackTrigger();
trigger.ControlID = button.ID;
mainContentUpdatePanel.Triggers.Add(trigger);

My guess is this doesn't work because the trigger collection needs to be defined during Page_Init or earlier.  After a bit more research, I found that registering the postback control with the ScriptManager is the way to go during runtime.  Figure 1 shows the function I put in the master page to handle this.

The last thing was pretty straight-forward.  I just needed to register the postback control as it was created in the FormView or DataGrid.  To find the postback control in a FormView, I used the FormView_ItemCreated event and then ((FormView)sender).FindControl() as you can see in Figure 3.  For a GridView, I would use the GridView_RowCreated event and then e.Row.FindControl() to get the postback control.

Print | posted on Thursday, November 01, 2007 12:14 PM

Comments on this post

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Hi, great post!
I've implemented it in my usercontrol but when
I check if FileUpload.HasFile the properties is always false...

Do you have any idea?

Thanks
Left by Giorgio on May 16, 2008 6:47 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Hi, Giorgio.

It sounds like maybe you're still not getting a postback. Try temporarily disabling your update panel to see if FileUpload.HasFile is true in that case. If so, double check to make sure that the button you're using to make the postback that causes the file to upload is registered as a postback trigger per Figure 3.
Left by Scott on May 16, 2008 7:38 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
great article, saved my day.
thank you
Left by Mesut on May 18, 2008 8:44 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Thanks man!!! I had been researching about it for a few days but nothing worked for me. I was about to give up until I found excellent article.
Left by Edgar on Jun 03, 2008 11:56 PM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Good one.Thank You So much
Left by Archana on Jun 20, 2008 12:27 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Thanks. Very helpful.
Left by Dennis on Jul 31, 2008 3:10 PM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Thanks. Your code is very useful.

Using an hidden iFrame is one another way for ajax file upload. See an example:

http://www.easyalgo.com/Examples/EAUpload/AjaxFileUploadWithAjaxProgressBar.aspx
Left by asp.net upload on Sep 02, 2008 5:00 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Hi, what if the button that causes the postback is outside of the fileupload and the usercontrol?
Would this solution work or would I have to do something different?
Left by Jon on Oct 22, 2008 3:15 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Jon, if the postback button is outside of an UpdatePanel, the upload should work fine because it will cause a normal postback.

If the postback button is inside an UpdatePanel, then it needs to be registered as a postback trigger.
Left by Scott on Oct 22, 2008 8:42 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
protected void Page_Load(object sender, EventArgs e)
{
//required to enable functionality of the FileUpload control in an AJAX UpdatePanel
((ScriptManager)this.Master.FindControl("ScriptManagerMain")).RegisterPostBackControl(btnUpload);

}
Left by Andrew Rosca on Dec 30, 2008 1:13 PM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
got 2 update panels in masterpage the postback not working
Left by jk on Apr 04, 2009 9:36 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Tanks man.You saved my time
Left by Arun on May 30, 2009 4:36 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
I was about to look up my old code for registerging a postback in code and this saved me from that tedius chore.
Left by Merritt on Jul 14, 2009 2:27 PM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
Thank you soo much for this. I've been struggling with the file upload in a footer template for days, and this solved my problem. Blessings to you!
Left by Inkamin on Jul 20, 2009 1:21 PM

# FileUpload in an Ajax Enabled Grid

Requesting Gravatar...
I am using a ajax enabled GridView(asp.net and C#). This GridView Contains 5 Columns, They Are
1. Student Id.
2. FileUpload (fu_StudPhoto)inside Template field.
3. Upload Button inside Template field.
4. Delete Button inside Template field.
5. Image Field inside Template field.

After Browsing the File and when I Click on Upload Button, the fu_StudPhoto = null.
So I Cannot Upload the Photo. If I Use Syncronous Post Back Instead Of Asyncronous I get a Exception Saying "Object refrence Not set to An Instance",
I Don't Want To use Syncronous Post Back, So Is There Any method to Upload a file without removing Ajax or asyncronous PostBack. Please Help Me.........
Left by R@hul on Oct 12, 2009 3:44 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
This Is For Web application.
Left by R@hul on Oct 12, 2009 3:48 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
I haven't found a way to make an asynchronous file upload using the standard Microsoft control.

You might try some of the third-party controls to see if they have a solution.

Regards,
Scott
Left by Scott on Oct 12, 2009 8:51 AM

# re: FileUpload in an Ajax UpdatePanel

Requesting Gravatar...
You can just add another updatePanel in your user control and define PostBackTrigger in there instead of working with masterpage, i.e.:

<asp:UpdatePanel ID="upFile" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="btnSubmit" />
</Triggers>
</asp:UpdatePanel>
Left by Romka on Dec 09, 2009 8:54 PM
Comments have been closed on this topic.