ASP Snippets

Categories






Alerts

Free Alerts

Your email will always be
private and will not be shared.




Follow us on twitter.




Zoom In | Zoom Out


Author is awarded Most Valuable Professional award by Microsoft ASP/ASP.Net

Using FileUpload Control inside ASP.Net AJAX UpdatePanel Control

Author:Mudassar Khan



In this article I am explaining a common issue faced by many new developers. The issue is How to use FileUpload control in ASP.Net AJAX UpdatePanel. Many try to place the FileUpload Control in UpdatePanel and feel it will upload file asynchronously in AJAX Style like Gmail.

But the answer is you cannot. Since FileUpload control does not work with partial postback which is done in UpdatePanel. FileUpload control requires a full postback.

Hence when you place FileUpload control in UpdatePanel and try to upload the file asynchronously using the HasFile property of the FileUpload Control will always be false.

So the question arises How to use FileUpload Control in UpdatePanel? The answer is by just changing the Trigger of the upload button from AsyncPostBackTrigger to PostBackTrigger. This means that even if the FileUpload control is inside UpdatePanel still there will be a Full Postback when upload button is clicked.

To test it out I developed a small application with a FileUpload control and two buttons

1. To upload the file asynchronously using AsyncPostBackTrigger with partial postback.

2. To upload the file synchronously using PostBackTrigger with full postback.

 

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

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

    <ContentTemplate>

        <asp:FileUpload ID="FileUpload1" runat="server" />

        <asp:Button ID="btnAsyncUpload" runat="server"

           Text="Async_Upload" OnClick = "Async_Upload_File" />

        <asp:Button ID="btnUpload" runat="server" Text="Upload"

           OnClick = "Upload_File" />               

    </ContentTemplate>

    <Triggers>

        <asp:AsyncPostBackTrigger ControlID = "btnAsyncUpload"

          EventName = "Click" />

        <asp:PostBackTrigger ControlID = "btnUpload" />

    </Triggers>

</asp:UpdatePanel>

 

Then I clicked both the upload buttons to see how the FileUpload control was behaving in the two scenarios.

 

Using AsyncPostbackTrigger

The figure below described that when the FileUpload is does asynchronously using AsyncPostbackTrigger the HasFile property of the FileUpload control is false.



FileHas Property is False when File is uploaded using AsyncPostbackTrigger

Using PostbackTrigger

The figure below described that when the FileUpload is does synchronously using PostbackTrigger the HasFile property of the FileUpload control is true.



FileHas Property is True when File is uploaded using PostbackTrigger

This completes this article. This is a new section which I am starting in order to put some light on the issues faced by developers in ASP.Net

  
Posted: May 05 2009, 17:33 by Mudassar Khan | Comments (13) RSS comment feed |
Views: 6932
Page copy protected against web site content infringement by Copyscape


If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share





Comments

Add comment


 

biuquote
  • Comment
  • Preview
Loading




0  +  0  =   










Community News





Web Hosting SpotLight


Consulting


For consulting and work related queries click here.



Advertise


Advertise with us. For more details click here.


Suggestions


Please provide your valuable suggesstions here.

This Site is hosted on

Lunarpages.com Web Hosting