FileUpload not working in Multiview and updatepanel

Question

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
    <ContentTemplate>

<asp:MultiView ID="MultiView1" runat="server" 
                 ActiveViewIndex="0">           
    <asp:View ID="View1" runat="server">
        <asp:Button Text="next"
            runat="server" onclick="Unnamed1_Click" />
    </asp:View>
    <asp:View ID="View2" runat="server">
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" 
        style="width: 56px" />
    <asp:FileUpload ID="fileupload2" runat="server" />
    </asp:View>
</asp:MultiView>
 </ContentTemplate>
</asp:UpdatePanel>

and the code behind is

 protected void Button1_Click(object sender, EventArgs e)
    {
        if (fileupload2.HasFile)
        {
            //code..
        }
    }
    protected void Unnamed1_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = 1;
    }

When i click Button1 for uploading the image on first time the fileupload2.HasFile returns "false"

without refrshing the page again try to upload the same picture then fileupload2.HasFile returns "true"

Working Properly in View1. Problem is with View 2

What is the problem with that fileupload ?

Answer 1

Try registering the button control with RegisterPostBackControl early in the page lifecycle:

   protected void Page_Init(object sender, EventArgs e)
   {
       ScriptManager1.RegisterPostBackControl(Button1);
   }

See Also:

FileUpload and UpdatePanel: ScriptManager.RegisterPostBackControl works the second time.

Answer 2

The problem is most likely that the UpdatePanel "converts" all requests from controls inside it to AJAX requests, and FileUpload doesn't work with AJAX. If you Google for "fileupload updatepanel", you'll see a bunch of articles and possible workarounds.

The reason why it's not working in View2 is that the button with id "Button1" has a trigger defined in the triggers section of the UpdatePanel. Defining such a trigger for a button will "ajaxify" it, so pushing the button will send an AJAX request instead of a "normal" postback.

Answer 3

Have you tried the AsyncFileUpload control from AjaxControlToolkit?

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx

Classic FileUpload does not really work well with AJAX and UpdatePanels.

Answer 4

Obtained from http://forums.asp.net/p/1105208/1689084.aspx

To use a FileUpload control inside an UpdatePanel control, set the postback control that submits the file to be a PostBackTrigger control for the panel.

Alternatively, you could use an iframe. The specific code isn't with me right now, but if you want it, I can dig it out when I have a chance to open my old drive.

As for the problem when the file is no longer available in view 2, you could probably try to save the file in View 1 and then retrieve it later in View 2. The reason is probably because the file is submitted once in view 1 and never resubmitted in view 2.

Answer 5

I do not know why but when I add a fake upload file out of the multiview, the file upload works correctly inside view2.

I hope this can still help someone

Code example that should work, but does not work as expected

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
    <ContentTemplate>  
        <asp:MultiView ActiveViewIndex="0" runat="server" ID="mv">
            <asp:View runat="server" ID="view1">
                <asp:Button ID="change" Text="Change View" runat="server" OnClick="change_Click" />
            </asp:View>

            <asp:View runat="server" ID="view2"> 
                <div id="divLogo" runat="server" class="form-group">
                    <label class="control-label">Image</label>
                    <ajaxToolkit:AsyncFileUpload ID="fileUploadImage" runat="server"
                        AllowMultiple="false" CssClass="fileUpload" PersistFile="true" />
                </div>
                <asp:Button ID="save" Text="Save" runat="server" OnClick="save_Click" />
            </asp:View>
        </asp:MultiView>
    </ContentTemplate>
</asp:UpdatePanel>

Example of code that works as expected with an auxiliary fake fileupload

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <div style="display: none;">
            <ajaxToolkit:AsyncFileUpload ID="AsyncFileUploadFake" runat="server"
                AllowMultiple="false" CssClass="fileUpload" PersistFile="true" />
        </div>
        <asp:MultiView ActiveViewIndex="0" runat="server" ID="mv">
            <asp:View runat="server" ID="view1">
                <asp:Button ID="change" Text="Change View" runat="server" OnClick="change_Click" />
            </asp:View>

            <asp:View runat="server" ID="view2"> 
                <div id="divLogo" runat="server" class="form-group">
                    <label class="control-label">Image</label>
                    <ajaxToolkit:AsyncFileUpload ID="fileUploadImage" runat="server"
                        AllowMultiple="false" CssClass="fileUpload" PersistFile="true" />
                </div>
                <asp:Button ID="save" Text="Save" runat="server" OnClick="save_Click" />
            </asp:View>
        </asp:MultiView>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 6

Sometimes you have to set triggers Postback for every event around the fileupload. Even, the button which raise the view where the fileupload is.

So, try this. It should work.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
    <ContentTemplate>

<asp:MultiView ID="MultiView1" runat="server" 
                 ActiveViewIndex="0">           
    <asp:View ID="View1" runat="server">
        <asp:Button Text="next" id="btnNext"
            runat="server" onclick="Unnamed1_Click" />
    </asp:View>
    <asp:View ID="View2" runat="server">
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" 
        style="width: 56px" />
    <asp:FileUpload ID="fileupload2" runat="server" />
    </asp:View>
</asp:MultiView>
 </ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="btnNext" />
    <asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>