Why does using file upload in a user control with ajax update panel not work?

Question

I'm trying to create a user control for upload and download attachment in my web application.

In my user control, i'm using asp.net update panel for upload and download files, and i use my user control in a <dive>...</dive> tag that display style is none.

Everywhere when i using this user control, i'm trying to set <dive>...</dive> tag display style to show user control, and i'm using below code for display this user control in modal popup mode :

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" CancelControlID="CancelButton" DropShadow="true" PopupControlID="PanelMain" PopupDragHandleControlID="PanelHeader" TargetControlID="btnFileOperation" />

In my user control i write the same below code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:FileUpload ID="fileUploadImage" runat="server" />
            <asp:Button ID="Button1" runat="server" Text="Upload Image" OnClick="btnUpload2_Click" />
            <br />
            <asp:Label ID="lblMessage" runat="server" Text="Image uploaded successfully." Visible="false"></asp:Label><br />
            <asp:UpdateProgress ID="UpdateProgress1" runat="server"        AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                    Please wait image is getting uploaded....
            </ProgressTemplate>
            </asp:UpdateProgress>
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btnUpload"  />
        </Triggers>
</asp:UpdatePanel>

But when i want access to FileUpload.PostedFile or FileUpload.HasFile properties in code(click event of upload button), these properties are null.

What could be the reason for this problem? and How to fix it?

Answer 1

I spent hours on this very problem, and finally found the answer on a five-year-old asp.net forum post: UpdatePanel + FileUpload + PostBackTrigger doesn't seem to work. To boil it down, on my site.master page the <form> tag had simply been:

<form id="Form1" runat="server">

The post from 2007 suggested changing it to:

<form id="Form1" method="post" enctype="multipart/form-data" runat="server">

Works great! I don't understand why, but it does.

The bulk of the answers I found all over the net -- including several on StackOverflow -- suggested simply creating a postback trigger for the update panel. None of the variations of that worked for me. About five minutes before quitting time, I found this obscure page on the asp.net forums. One of the best feelings is getting a problem solved right before it's time to go home.

I hope this helps you.