Simple AJAX File Upload

Introduction

AJAX is a great thing for ASP.NET developers. It has begun to level the playing field with rich client applications, in terms of user experience and responsiveness. One downside has been that many things that once worked are broken; including the FileUpload control.

The essence of the problem is that the FileUpload control does not work with asynchronous postbacks, and therefore does not work from within an AJAX UpdatePanel. The technique presented in this article allows the FileUpload control to work within an UpdatePanel, by forcing a full postback; however, the rest of the controls can still take advantage of the asynchronous postbacks provided by the UpdatePanel. The example application will be a simple web form containing a DatePicker Control, a Label and a FileUpload. We will see that the FileUpload will function via a full postback, but the DatePicker will retain its AJAX behaviour.

1. Create a New AJAX-enabled Web Project

When Microsoft AJAX is installed, it adds a new template to Visual Studio, ASP.NET AJAX-Enabled Web Site. Create a new one of these:

Create a new AJAX Web Site

2. Create a New Web Form

In this example, I have added an Eclipse Web Solutions ASP.NET DatePicker control, a Label, and a FileUpload control, all within an UpdatePanel:

Eclipse Web Solutions ASP.NET DatePicker

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
   <ContentTemplate>
      <ews:DatePicker ID="DatePicker1"
         runat="server" UsingUpdatePanel="True" /><br />
      <asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
      <asp:FileUpload ID="FileUpload1" runat="server" />
      <asp:Button ID="Button1" runat="server"
         Text="Upload" />
   </ContentTemplate>
</asp:UpdatePanel>

Code-behind:

protected void DatePicker1_SelectionChanged(object sender, EventArgs e)
{
    Label1.Text = DatePicker1.DateValue.ToShortDateString();
}

protected void Button1_Click(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        Label1.Text = FileUpload1.FileName;
    }
}

It is at this point that we experience the problem. Run the form, and you will find that the file upload control does not work. Because the file upload control is within an UpdatePanel, the file is not posted to the server.

3. Enable File Upload Full Postback

As mentioned earlier, the trick is to force the file upload control to perform a full postback, and we do this using triggers. Triggers allow the developer to specify what will cause partial and full postbacks. They must be defined within the UpdatePanel but outside of the ContentTemplate. We want to create a trigger that will instruct the button that we are using for the upload to perform a full postback. The updated markup is:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
 <Triggers>
  <asp:PostBackTrigger ControlID="Button1" />
 </Triggers>
 <ContentTemplate>
  <ews:DatePicker ID="DatePicker1" runat="server" UsingUpdatePanel="True" 
                  OnSelectionChanged="DatePicker1_SelectionChanged" /><br />
  <asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
  <asp:FileUpload ID="FileUpload1" runat="server" />
  <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" />
 </ContentTemplate>
</asp:UpdatePanel>

Now, when the form is run, the DatePicker is still working asynchronously, but the file upload is also working, thanks to the PostBackTrigger.

You must Sign In to use this message board.


Per page

Rebuild the Page
Member 4408548

9:38 23 Jul '09

After adding the triggers it wasn't working for me. I right clicked on the .aspx page in the solution explorer and clicked "Build Page." That seemed to do the trick. Thanks for the article!
Sign In·View Thread·PermaLink	1.00/5

UpdateProgress Problem
deepak_int

19:42 19 Apr '09

Using Postback trigger solves the problem of File upload control not working, but on the same page i m using UpdateProgress control, so when i use Postback trigger the UpdateProgress Panel does not show up. Can anyone suggest Warm regards Deepak Sharma Software Engineer
Sign In·View Thread·PermaLink

Re: UpdateProgress Problem
Member 4313257

2:41 6 Aug '09

I also have this problem!!! Can anyone give hand??
Sign In·View Thread·PermaLink

Re: UpdateProgress Problem
Thomas Maule

8:43 1 Feb '10

I just found the article on FileUpload and PostBackTrigger -- I find myself with the same issue as above... the UpdateProgress isn't firing. Did I miss something? Did anyone address this yet?
Sign In·View Thread·PermaLink

Re: UpdateProgress Problem
Thomas Maule

6:44 2 Feb '10

Ok, if you are still interested here ya go...

I added this to the OnClientClick event of the button I use to fire upload.

<asp:Button ID="UploadButton" runat="server" Height="20px" Text="Upload" OnClientClick="javascript:document.getElementById('ctl00_ContentPlaceHolder1_ImageControl1_UpdateProgress').style.display='block';"/>

This portion of the code will change depending how where your controls are placed . Mine is a Web User Control dropped in the default page. "ctl00_ContentPlaceHolder1_ImageControl1_UpdateProgress"

problem in file upload
Shweta parikh

23:53 19 Mar '09

hi

in my application i m using a master page nd in page(which is using the master page)i m loading my ascx control.

in my ascx control i m using file upload control.

i have an update panel in my aspx page.

but when i debug my app i always get hasfile = false

i also tried to put another update panel in my ascx nd set triggers.

but now at this time when my control is loaded in aspx page i got an error a control with id btn2 could not be found.

i dont knw how to handle this.

can anyone help me?

thanx in advance.

shweta

My vote of 1
danny_pow

1:12 23 Jan '09

Does not solve problem
Sign In·View Thread·PermaLink	2.71/5

Need Help..
ji_vijay

19:05 29 Oct '08

Hi, I have not used any file upload control in my project. But i have used listbox inside the update panel. When i host my project into server i got this error.. Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 0 Pls anybody help me.. Thanks & Regards., VijayG
Sign In·View Thread·PermaLink

Re: Need Help..
liammclennan

19:07 29 Oct '08

Please don't post unrelated questions. http://forums.asp.net/[^] Liam McLennan liam@eclipsewebsolutions.com.au www.eclipsewebsolutions.com.au
Sign In·View Thread·PermaLink

Great Article
Member 4461433

3:27 22 Oct '08

Hi, thank you for your code, Worked first time for me! Cheers mate!
Sign In·View Thread·PermaLink

Also important (at least UserControl)
ph81

21:09 21 Oct '08

sometimes solutions does not work unless u put Page.Form.Enctype = "multipart/form-data"; in UserControl Load function.
Sign In·View Thread·PermaLink	1.00/5

Re: Also important (at least UserControl)
gezequiel09

9:15 30 Oct '08

Great! I don't now what it is Page.Form.Enctype = "multipart/form-data"; but it works for me realy fine...
Sign In·View Thread·PermaLink

Re: Also important (at least UserControl)
shogedal

4:49 8 Feb '10

THANKS! That did it for me in a situation with nested master pages surrounding the update panel! I was almost going nuts!
Sign In·View Thread·PermaLink

So,where is ajax here?
ab_dc

4:39 11 Aug '08

hello , it still do postback , how to upload without refresh all the page ?? thanks alot in advance.
Sign In·View Thread·PermaLink

Re: So,where is ajax here?
liammclennan

12:15 11 Aug '08

THis article is about getting file upload to work in an MS ajax update panel. I don't know how to do an ajax upload. Maybe jquery can help? Liam McLennan liam@eclipsewebsolutions.com.au www.eclipsewebsolutions.com.au
Sign In·View Thread·PermaLink

Re: So,where is ajax here?
Portatofe

6:09 2 Oct '08

Good Question Cake Shop Cooking Dash Lost Secrets: Bermuda Triangle Cinema Tycoon 2: Movie Mania The Hidden Object Show: Season 2
Sign In·View Thread·PermaLink

Re: So,where is ajax here?
Zinkyu

11:22 30 Jan '09

The point here is that the FileUpload control itself will not function inside an Ajax panel without causing a full page postback. Therefore, AJAX does not apply to the File Upload control itself. It's for the other controls on the page.

Further reading, however, reveals that this is a limitation of javascript moreso than a limitation of .NET. According to ajaxf1.com[^], it's a security limitation. They recommend the "iframe" strategy (include an iframe of the upload target), which does work. Personally, I try to steer away from iframe's when possible.

File Upload
HendrikO

2:12 17 Jun '08

Thank you for this tip.
Sign In·View Thread·PermaLink	1.50/5

Update Panel Propblems.
Hasan Mohiuddin Farooqi

21:06 18 May '08

Hi Frnds,

I am facing some update panel problems while using a treeview control.

1) I set the expandDepth=1, and when the inner node is clicked entire tree is getting collapsed.
2) Giving PopulateOnDemand can not be set to true when then node is already set populateOnDemand to true. (This is becoz the child items r getting populated dynamically at runtime on click of node).

3) I have a download button in update panel when i clicked it, the exception Message is

"Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), response filters, HttpModules, or server trace is enabled.
Details: Error parsing near 'Fixes in PL/SQL Deve'."

Generally v use Response.WriteFile or TransmitFile while downloading a file, The exception is here only..

Is there any property of update panel to be set to keep working with treeview or the update panel w'll not supported for treeview control?

And also any alternative for downloading the file from within updatepanel?

All the suggessions and solutions are appreciated and valueable to me.

Thands in advance.
Regards
Hasan.

What about a file upload control inside an ASCX user control inside an update panel
frankkirchner

14:21 1 May '08

Liam McLennan's excellent article on how to set a postback trigger for the fileupload control in the update panel works great, unless the file upload control happens to be inside a user control that is inside of the update panel. There is no way to set the trigger to the control in the ascx file! Any ideas?
Sign In·View Thread·PermaLink	1.50/5

Re: What about a file upload control inside an ASCX user control inside an update panel
liammclennan

14:41 1 May '08

When specifying the control id for the postback trigger use the following syntax usercontrolname:fileuploadcontrolname Liam McLennan liam@eclipsewebsolutions.com.au www.eclipsewebsolutions.com.au
Sign In·View Thread·PermaLink

Re: What about a file upload control inside an ASCX user control inside an update panel
frankkirchner

16:28 1 May '08

Hmm i like it, but it did not work. Now, the 'usercontrol name' I think is 'Utils1' the ascx control istself is called Utils.ascx, and i make reference to it as such as Utils1 in other code behind like that. Here is the reference:
<%@ Register Src="Utils.ascx" TagName="Utils" TagPrefix="uc3" %>

I tried 'Utils', Utils1' and 'uc3' they all give the same thing.

A control with ID 'Utils1:FileUpload1' could not be found for the trigger in UpdatePanel 'UpdatePanel1'.

Solution for using this technique with a user control
kbomb987

5:24 24 Jun '08

To assign the postback trigger from within a user control, you can use the code-behind to reference the parent page and make the trigger. Here's how:

On your parent page, you have the following code somewhere in the page which includes your scriptmanager, updatepanel, and user control that has a file upload in it:

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

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<MyUserControls:MyControl id="usrMyUploadControl" runat="server" ScriptManagerName="ScriptManager1" />
<!-- Notice that we include a public string variable in your user control
called ScriptManagerName which will hold the tag name of your script manager -->

</ContentTemplate>
</asp:UpdatePanel>

Now, in your user control, you will have the following code which will search for the ScriptManager in the page's collection of nested controls. Then it will register the postback trigger from within your user control. This is how we can reference the user control's upload button, which in this case is called btnUpload.

    public string ScriptManagerName = "";

    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);

        if (ScriptManagerName.Length > 0)
        {
            ScriptManager scriptManager = (ScriptManager)SearchControl(Page, ScriptManagerName);
            if (scriptManager != null)
            {
                scriptManager.RegisterPostBackControl(btnUpload);
            }
        }
    }

    public Control SearchControl(Control container, string id)
    {
        Control control = container.FindControl(id);
        if (control == null)
        {
            foreach (Control c in container.Controls)
            {
                if (c.HasControls())
                {
                    control = SearchControl(c, id);
                    if (control != null) break;
                }
            }
        }
        return control;
    }

Re: Solution for using this technique with a user control
aikipoodle

10:51 20 Jul '08

Guys,

Another thing to remember, is that if the upload control is not visible on load, the enctype of the form will never be set to 'multipart/form-data' without which this all will not work.
So in the control, in which ever event handler reveals the upload control:

ScriptManager SM = (ScriptManager)Page.Master.FindControl("uxScriptManager");
        SM.RegisterPostBackControl(btnAddIssue);

And in the parent page, or where ever the form is defined:

if (!this.IsPostBack)
        {
            this.Page.Form.Enctype = "multipart/form-data";
        }

Happy coding!

Aikiken

Re: Solution for using this technique with a user control
kaan05

11:10 7 Aug '09

Hi Great work guys! This and SearchControl solved my problem off dynamically generated user control in master/content/usercontrol site. Thank you alot! aikipoodle wrote: if (!this.IsPostBack) { this.Page.Form.Enctype = "multipart/form-data"; } /Liam Rr.
Sign In·View Thread·PermaLink