wizard and asyncfileupload in next step

Question

In my ASP.NET .NET 3.5 I have custom control that has UpdatePanel inside.
In that update panel I Wizard control with 7 steps.
In second step I want to upload attachments using AsyncFileUpload.
In my scenario user can add multiple files and they will show inside grid, so after upload he can add comments to them.
Everything works file if I have AsyncFileUpload in Step that is visible at beginning, UploadedComplete event is fired correctly, but when I start from different step I can't get that Upload to work.

I was thinking about using iframe, but I would like to avoid it because I need to have 5 upload components in different Steps.

Is it possible to get that AsyncFileUpload to work in Wizard?

My code is standard, nothing magical at moment:
ToolkitScriptManager
UpdatePanel
-ContentTemplate
--Wizard
---WizardSteps
----WizardStep 1
----WizardStep 2
-----AsyncFileUpload
----WizardStep 3
----WizardStep 4
-----AsyncFileUpload 1
-----AsyncFileUpload 2
----WizardStep 5

And my simple event handler

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    var fileUpload = (AjaxControlToolkit.AsyncFileUpload)sender;
    if (fileUpload.HasFile)
    {
        string strPath = path + e.FileName;
        AsyncFileUpload1.SaveAs(strPath);
    }
}

As I wrote before I get that event if I start from Step 2 (ActiveStepIndex=1).

Here is my ascx code:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PWS_Test.ascx.cs" Inherits="kontrolki_PWS_Test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Wizard ID="Wizard1" runat="server" ActiveStepIndex="0">
            <WizardSteps>
                <asp:WizardStep runat="server" title="Step 1">
                    <asp:Label ID="Label1" runat="server" Text="Questions"></asp:Label>
                    <br/>
                    <asp:CheckBox ID="CheckBox1" runat="server" Text="One"/>
                    <br/>
                    <asp:CheckBox ID="CheckBox2" runat="server" Text="Two"/>
                </asp:WizardStep>
                <asp:WizardStep runat="server" title="Step 2">
                    <asp:Label ID="Label2" runat="server" Text="Choose Your image"></asp:Label>
                    <br />
                    <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" FailedValidation="False" OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
                </asp:WizardStep>
            </WizardSteps>
        </asp:Wizard>
    </ContentTemplate>
</asp:UpdatePanel>

And here is cs code:

using System;

public partial class kontrolki_PWS_Test : System.Web.UI.UserControl
{
    protected const string path = @"c:\temp\";

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        var fileUpload = (AjaxControlToolkit.AsyncFileUpload)sender;
        if (fileUpload.HasFile)
        {
            string strPath = path + e.FileName;
            AsyncFileUpload1.SaveAs(strPath);
        }
    }
}

This works when I start from step 2.

As a workaround I've created a hidden div in my control just before wizard:

<div style="display: none">
    <asp:AsyncFileUpload ID="AsyncFileUpload2" runat="server" />
</div>

and now my upload is working, but I would like normal solution instead of that workaround.

Answer 1

Add the attribute: enctype="multipart/form-data" to your <form> tag.

<form id="form1" runat="server" enctype="multipart/form-data">
 ...
 ...
</form>