Click here to Skip to main content
11,478,896 members (75,933 online)
Click here to Skip to main content

Simple AJAX File Upload

, 29 Dec 2006 CPOL 511.6K 11.2K 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

 
QuestionRE: Simple AJAX File Upload Pin
ebdul-haleem23-Oct-13 1:31
memberebdul-haleem23-Oct-13 1:31 
QuestionIn a Gridview Pin
Member 259002923-Oct-12 11:30
memberMember 259002923-Oct-12 11:30 
GeneralMy vote of 5 Pin
mohsenalaghemand18-Sep-12 11:27
membermohsenalaghemand18-Sep-12 11:27 
QuestionUploadeer Pin
basitex26-Mar-12 8:07
memberbasitex26-Mar-12 8:07 
QuestionWorks only after the first postback Pin
jerchap4-Nov-11 7:36
memberjerchap4-Nov-11 7:36 
AnswerRe: Works only after the first postback Pin
MichaelMerrell21-Mar-12 5:01
memberMichaelMerrell21-Mar-12 5:01 
GeneralMy vote of 4 Pin
basheer97121-Jul-11 3:53
memberbasheer97121-Jul-11 3:53 
GeneralMy vote of 5 Pin
zhangtai1-Mar-11 19:28
memberzhangtai1-Mar-11 19:28 
GeneralMy vote of 5 Pin
Lakshmi Narsaiah26-Aug-10 9:01
memberLakshmi Narsaiah26-Aug-10 9:01 
GeneralMy vote of 5 Pin
ricpue20-Aug-10 10:20
memberricpue20-Aug-10 10:20 
GeneralMy vote of 5 Pin
saqib66615-Jul-10 0:18
membersaqib66615-Jul-10 0:18 
GeneralRebuild the Page Pin
Member 440854823-Jul-09 9:38
memberMember 440854823-Jul-09 9:38 
GeneralUpdateProgress Problem Pin
deepak_int19-Apr-09 19:42
memberdeepak_int19-Apr-09 19:42 
GeneralRe: UpdateProgress Problem Pin
Member 43132576-Aug-09 2:41
memberMember 43132576-Aug-09 2:41 
GeneralRe: UpdateProgress Problem Pin
Thomas Maule1-Feb-10 8:43
memberThomas Maule1-Feb-10 8:43 
AnswerRe: UpdateProgress Problem Pin
Thomas Maule2-Feb-10 6:44
memberThomas Maule2-Feb-10 6:44 
GeneralRe: UpdateProgress Problem Pin
Member 353020313-Apr-11 21:52
memberMember 353020313-Apr-11 21:52 
Generalproblem in file upload Pin
Shweta parikh19-Mar-09 23:53
memberShweta parikh19-Mar-09 23:53 
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
GeneralMy vote of 1 Pin
danny_pow23-Jan-09 1:12
memberdanny_pow23-Jan-09 1:12 
GeneralNeed Help.. Pin
ji_vijay29-Oct-08 19:05
memberji_vijay29-Oct-08 19:05 
GeneralRe: Need Help.. Pin
liammclennan29-Oct-08 19:07
memberliammclennan29-Oct-08 19:07 
GeneralGreat Article Pin
Member 446143322-Oct-08 3:27
memberMember 446143322-Oct-08 3:27 
GeneralAlso important (at least UserControl) Pin
ph8121-Oct-08 21:09
memberph8121-Oct-08 21:09 
GeneralRe: Also important (at least UserControl) Pin
gezequiel0930-Oct-08 9:15
membergezequiel0930-Oct-08 9:15 
GeneralRe: Also important (at least UserControl) Pin
shogedal8-Feb-10 4:49
membershogedal8-Feb-10 4:49 
QuestionSo,where is ajax here? Pin
ab_dc11-Aug-08 4:39
memberab_dc11-Aug-08 4:39 
AnswerRe: So,where is ajax here? Pin
liammclennan11-Aug-08 12:15
memberliammclennan11-Aug-08 12:15 
AnswerRe: So,where is ajax here? Pin
Portatofe2-Oct-08 6:09
memberPortatofe2-Oct-08 6:09 
AnswerRe: So,where is ajax here? Pin
Zinkyu30-Jan-09 11:22
memberZinkyu30-Jan-09 11:22 
GeneralFile Upload Pin
HendrikO17-Jun-08 2:12
memberHendrikO17-Jun-08 2:12 
QuestionUpdate Panel Propblems. Pin
Hasan Mohiuddin Farooqi18-May-08 21:06
memberHasan Mohiuddin Farooqi18-May-08 21:06 
QuestionWhat about a file upload control inside an ASCX user control inside an update panel Pin
frankkirchner1-May-08 14:21
memberfrankkirchner1-May-08 14:21 
AnswerRe: What about a file upload control inside an ASCX user control inside an update panel Pin
liammclennan1-May-08 14:41
memberliammclennan1-May-08 14:41 
GeneralRe: What about a file upload control inside an ASCX user control inside an update panel Pin
frankkirchner1-May-08 16:28
memberfrankkirchner1-May-08 16:28 
AnswerSolution for using this technique with a user control Pin
kbomb98724-Jun-08 5:24
memberkbomb98724-Jun-08 5:24 
GeneralRe: Solution for using this technique with a user control Pin
aikipoodle20-Jul-08 10:51
memberaikipoodle20-Jul-08 10:51 
GeneralRe: Solution for using this technique with a user control Pin
kaan057-Aug-09 11:10
memberkaan057-Aug-09 11:10 
GeneralRe: Solution for using this technique with a user control Pin
princerc14-Feb-09 4:26
memberprincerc14-Feb-09 4:26 
QuestionIs it possible to call upload from a menu item? Pin
alan9317-Mar-08 4:11
memberalan9317-Mar-08 4:11 
AnswerRe: Is it possible to call upload from a menu item? Pin
liammclennan17-Mar-08 11:16
memberliammclennan17-Mar-08 11:16 
GeneralRe: Is it possible to call upload from a menu item? Pin
alan9318-Mar-08 7:34
memberalan9318-Mar-08 7:34 
QuestionError when using postback trigger Pin
jeremygrand13-Dec-07 15:58
memberjeremygrand13-Dec-07 15:58 
GeneralThanks for the great tips Pin
J Navaneethan27-Nov-07 5:57
memberJ Navaneethan27-Nov-07 5:57 
GeneralThanks for the info Pin
aaron.barker9-Oct-07 14:57
memberaaron.barker9-Oct-07 14:57 
QuestionNot Shows the UpdateProgress [modified] Pin
shan_y2005@yahoo.com30-Sep-07 21:51
membershan_y2005@yahoo.com30-Sep-07 21:51 
AnswerRe: Not Shows the UpdateProgress Pin
supernont1-Nov-07 9:48
membersupernont1-Nov-07 9:48 
NewsMore reliable way Pin
beep20-Aug-07 13:33
memberbeep20-Aug-07 13:33 
GeneralRe: More reliable way Pin
mkushner21-Aug-07 19:40
membermkushner21-Aug-07 19:40 
Questiontrigger control inside formview edit mode Pin
shadstrife20-Jun-07 20:19
membershadstrife20-Jun-07 20:19 
AnswerRe: trigger control inside formview edit mode Pin
Bob Zebuilder20-Jun-07 23:14
memberBob Zebuilder20-Jun-07 23:14 

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