Upload fails once, then works correctly

Question

I'm working on an ASP.Net custom control. In my control I have a FileUpload control, inside a MultiView, inside an AJAX UpdatePanel.

I've added the submit button to the post back triggers of the update panel. (This is the standard fix for getting a FileUpload to work within an UpdatePanel).

On the first submit the FileUpload does not upload anything (ie, the control's FileBytes property has zero length). Everything else on the form submits properly.

On the second and subsequent submits, the upload works correctly.

What could cause this, and how do I fix it?

---

For example:

<asp:UpdatePanel runat="server" ID="update_panel" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:MultiView runat="server" ID="mvMultiView" ActiveViewIndex="0">
            <asp:View runat="server" ID="viewOne">
                <!-- content -->
            </asp:View>
            <asp:View runat="server" ID="viewTwo">
                <!-- some other form elements -->
                <asp:FileUpload ID="file_upload" runat="server" />
                <asp:Button ID="save_button" runat="server" Text="Save" OnClick="save_Click" ValidationGroup="group" />
            </asp:View>
         </asp:MultiView>
    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="save_button" />
    </Triggers>
</ajax:UpdatePanel>

Answer 1

The FileUpload control is one of the controls not supported by UpdatePanel.

There are several other libraries out there for doing AJAX uploads though. Telerik has a nice one I've used before, but it's not free. There are some decent free ones though, but you'll have to try a few out. Each has it's advantages and disadvantages.

Answer 2

I have code almost identical to yours that works fine, except my UpdateMode=Conditional:

  <asp:UpdatePanel ID="upUpload" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:RadioButton ID="rbImage" GroupName="resourceupload" Checked="true" Text="image" runat="server" />
    <asp:RadioButton ID="rbPdf" GroupName="resourceupload" Text="pdf" runat="server" />
     <asp:FileUpload ID="FileUpload1" runat="server"  Width="175"/>
    <asp:Button ID="btnUpload" runat="server" CausesValidation="false"
    Text="Upload" OnClick="btnUpload_Click" />
    <asp:Label ID="lblMsg" Visible="false" runat="server" Text=""></asp:Label>

    </ContentTemplate> 
    <Triggers>
      <asp:PostBackTrigger ControlID="btnUpload" />
      </Triggers>                            
   </asp:UpdatePanel>

Answer 3

This turned out to be caused by the FileUpload Control being rendered during a partial page update. To submit properly the FileUpload control needs to be rendered and submitted using full post backs. Because the first form submit caused a full post back, the upload began working as intended the second time around.

Solution: Add both of the buttons that display and submit the file upload control to the update panels post back triggers.

eg:

   <Triggers>
      <asp:PostBackTrigger ControlID="btnShowUploadForm" />
      <asp:PostBackTrigger ControlID="btnUpload" />
   </Triggers>

Answer 4

The solution to also add the btnShowUploadForm will negate the purpose of the update panel. You might as well remove the data access control (where the fileupload control is residing), out of the update panel. The point of the update panel is for the btnShowUploadForm and the Cancel button (to cancel upload, if any), to at least cause a asynchpostback for better user experience.

Answer 5

I tried adding the line below in the Page Load event and it works the first time and subsequent times.

Page.Form.Enctype = “multipart/form-data”;

Explicitly specifying the form tag in source will not work.

Answer 6

Yup, Jojo's solutions worked for me as well:

Page.Form.Enctype = “multipart/form-data”;

Thanks!