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