Click here to Skip to main content
11,495,049 members (37,538 online)
Click here to Skip to main content

Simple AJAX File Upload

, 29 Dec 2006 CPOL 512.2K 11.3K 99
Rate this:
Please Sign up or sign in to vote.
A simple approach to enable the FileUpload control to work with Microsoft AJAX.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

liammclennan
Web Developer
Australia Australia
Liam McLennan has been developing for the internet since 2001. He is passionate about delivering top quality I.T. solutions that address his customer's needs.

Comments and Discussions

 
GeneralRe: trigger control inside formview edit mode Pin
shadstrife21-Jun-07 16:02
membershadstrife21-Jun-07 16:02 
QuestionRe: trigger control inside formview edit mode Pin
Txoov30-Jul-07 5:54
memberTxoov30-Jul-07 5:54 
AnswerRe: trigger control inside formview edit mode Pin
beefman16-Aug-07 4:39
memberbeefman16-Aug-07 4:39 
QuestionPlease tell me where to place this trigger Pin
RDayalu16-Jun-07 14:59
memberRDayalu16-Jun-07 14:59 
AnswerRe: Please tell me where to place this trigger Pin
Bob Zebuilder16-Jun-07 15:04
memberBob Zebuilder16-Jun-07 15:04 
GeneralRe: Please tell me where to place this trigger Pin
RDayalu16-Jun-07 15:16
memberRDayalu16-Jun-07 15:16 
GeneralRe: Please tell me where to place this trigger Pin
Bob Zebuilder16-Jun-07 16:57
memberBob Zebuilder16-Jun-07 16:57 
Generalit's not working when i click very first on upload button [modified] Pin
Mr. Sandy Gujar18-May-07 4:09
memberMr. Sandy Gujar18-May-07 4:09 
GeneralRe: it's not working when i click very first on upload button Pin
Brenda Hanel17-Jul-07 6:20
memberBrenda Hanel17-Jul-07 6:20 
GeneralRe: it's not working when i click very first on upload button Pin
Goudax3-Oct-07 1:14
memberGoudax3-Oct-07 1:14 
GeneralRe: it's not working when i click very first on upload button Pin
Brenda Hanel3-Oct-07 3:36
memberBrenda Hanel3-Oct-07 3:36 
GeneralRe: it's not working when i click very first on upload button Pin
Goudax5-Oct-07 0:52
memberGoudax5-Oct-07 0:52 
GeneralRe: it's not working when i click very first on upload button Pin
Goudax5-Oct-07 6:00
memberGoudax5-Oct-07 6:00 
AnswerRe: it's not working when i click very first on upload button Pin
BostLabs Concepts6-Oct-07 16:54
memberBostLabs Concepts6-Oct-07 16:54 
AnswerRe: it's not working when i click very first on upload button Pin
BostLabs Concepts6-Oct-07 16:56
memberBostLabs Concepts6-Oct-07 16:56 
AnswerSOLUTION Pin
Stephen Swensen10-Oct-07 12:18
memberStephen Swensen10-Oct-07 12:18 
GeneralRe: it's not working when i click very first on upload button Pin
Ahilan Thurairajah28-Nov-07 11:29
memberAhilan Thurairajah28-Nov-07 11:29 
AnswerRe: it's not working when i click very first on upload button Pin
Fabian Rubio7-Jul-08 15:49
memberFabian Rubio7-Jul-08 15:49 
GeneralRe: it's not working when i click very first on upload button Pin
Joseph Foster15-Jan-09 6:18
memberJoseph Foster15-Jan-09 6:18 
GeneralRe: it's not working when i click very first on upload button Pin
duy nguye ngoc27-Apr-11 6:14
memberduy nguye ngoc27-Apr-11 6:14 
QuestionHow we can avoid the page postback [modified] Pin
tariq software engineer15-May-07 22:26
membertariq software engineer15-May-07 22:26 
AnswerRe: How we can avoid the page postback Pin
Bob Zebuilder15-May-07 23:28
memberBob Zebuilder15-May-07 23:28 
GeneralDoesn't work in a wizard... Pin
Jonah Stenlund15-May-07 2:07
memberJonah Stenlund15-May-07 2:07 
AnswerRe: Doesn't work in a wizard... Pin
Jonah Stenlund15-May-07 2:48
memberJonah Stenlund15-May-07 2:48 
AnswerRe: Doesn't work in a wizard... Pin
Jonah Stenlund15-May-07 2:50
memberJonah Stenlund15-May-07 2:50 
GeneralRe: Doesn't work in a wizard... Pin
Txoov30-Jul-07 6:12
memberTxoov30-Jul-07 6:12 
QuestionWhat if using a user control in update panel? [modified] Pin
MikeWest2229-Apr-07 10:17
memberMikeWest2229-Apr-07 10:17 
AnswerRe: What if using a user control in update panel? Pin
Bob Zebuilder9-Apr-07 13:15
memberBob Zebuilder9-Apr-07 13:15 
AnswerRe: What if using a user control in update panel? Pin
DAT HAN25-Apr-07 6:36
memberDAT HAN25-Apr-07 6:36 
GeneralRe: What if using a user control in update panel? Pin
Viji A12-Jul-07 16:02
memberViji A12-Jul-07 16:02 
GeneralRe: What if using a user control in update panel? Pin
Viji A12-Jul-07 16:04
memberViji A12-Jul-07 16:04 
GeneralFantastic Pin
felipedr2-Apr-07 15:41
memberfelipedr2-Apr-07 15:41 
GeneralA workaround Pin
Vinayak K. Shrestha31-Mar-07 7:46
memberVinayak K. Shrestha31-Mar-07 7:46 
GeneralMessage Automatically Removed Pin
25-Mar-07 21:00
memberyaniar25-Mar-07 21:00 
GeneralRe: FileUpload worked in UpdatePanel Pin
BeeGone5-Jun-07 7:56
memberBeeGone5-Jun-07 7:56 
GeneralMagic Ajax Panel Pin
xberia7-Mar-07 17:16
memberxberia7-Mar-07 17:16 
Generalbullsh*t Pin
zefiroX31-Jan-07 11:45
memberzefiroX31-Jan-07 11:45 
GeneralNested Update panel's Pin
dano219-Jan-07 1:23
memberdano219-Jan-07 1:23 
GeneralRe: Nested Update panel's Pin
liammclennan9-Jan-07 1:35
memberliammclennan9-Jan-07 1:35 
GeneralRe: Nested Update panel's Pin
dano219-Jan-07 2:02
memberdano219-Jan-07 2:02 
GeneralRe: Nested Update panel's Pin
dano219-Jan-07 2:13
memberdano219-Jan-07 2:13 
GeneralRe: Nested Update panel's Pin
liammclennan9-Jan-07 2:14
memberliammclennan9-Jan-07 2:14 
GeneralRe: Nested Update panel's Pin
dano219-Jan-07 3:49
memberdano219-Jan-07 3:49 
GeneralRe: Nested Update panel's Pin
dano219-Jan-07 22:43
memberdano219-Jan-07 22:43 
GeneralRe: Nested Update panel's Pin
dano219-Jan-07 2:20
memberdano219-Jan-07 2:20 
QuestionWhich Version of MS AJAX are you using for this example? Pin
TerryD643-Jan-07 8:08
memberTerryD643-Jan-07 8:08 
AnswerRe: Which Version of MS AJAX are you using for this example? Pin
liammclennan3-Jan-07 11:34
memberliammclennan3-Jan-07 11:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150520.1 | Last Updated 30 Dec 2006
Article Copyright 2006 by liammclennan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid