ASPSnippets

Alerts
Get notified when a new article is published.

Name
 
Email

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

Follow us on twitter.
 
Using FileUpload Control inside ASP.Net AJAX UpdatePanel Control
Author Name: Mudassar Khan Published Date: April 23, 2009
Filed Under :
ASP.Net
Views: 7249

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

  

If you like this article, help us grow by bookmarking this page on any social bookmarking site.
Bookmark and Share Page copy protected against web site content infringement by Copyscape

Related Articles

Comments

Add Comments

You can add your comment about this article using the form below. Make sure you provide a valid email address
else you won't be notified when the author replies to your comment

Please note that all comments are moderated and will be deleted if they are
  • Not relavant to the article
  • Spam
  • Advertising campaigns or links to other sites
  • Abusive content.
There is no need to add BR tags. Simply press enter for new line

Name*  
Email*
Comment*  
Security code
Security code



 


Community News