<%@ Page Title="Multi-Step Form with Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>
<script runat="server"> protected void BtnSubmit_Click(object sender, EventArgs e)
 {
 lblMsResult.Text = "Submitted! Name: " + Server.HtmlEncode(txtName.Text)
 + ", Email: " + Server.HtmlEncode(txtEmail.Text);
 lblMsResult.Visible = true;
 }
</script>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Multi-Step Form with Upload - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Multi-Step Form with Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .steps-bar { display: flex; gap: 0; margin-bottom: 16px; }
 .step-item {
 flex: 1; padding: 8px; text-align: center; font-size: 0.82rem;
 background: #f1f5f9; border: 1px solid #e2e8f0; color: #64748b;
 }
 .step-item.active { background: #2563eb; color: #fff; border-color: #2563eb; }
 .step-item.completed { background: #dcfce7; color: #166534; }
 .step-panel { display: none; }
 .step-panel.active { display: block; }
</style> 
<div class="demo-card"> <div class="demo-card-header">Multi-Step Form with Upload</div> <div class="demo-card-body"> <p class="demo-description"> A three-step registration form where step 2 requires document upload.
 Navigation between steps is controlled, and the form collects data across all steps.
 Uses Web Forms controls for form fields.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a document upload as one step of a multi-step form - the uploaded id survives step navigation until final submit.</div> <div class="steps-bar"> <div class="step-item active" id="si1">1. Personal Info</div> <div class="step-item" id="si2">2. Documents</div> <div class="step-item" id="si3">3. Review</div> </div> <div class="step-panel active" id="sp1" style="max-width:420px;"> <div class="mb-3"> <label class="form-label" for="txtName">Name</label> <asp:TextBox ID="txtName" runat="server" CssClass="form-control" placeholder="Full Name" ClientIDMode="Static" /> </div> <div class="mb-3"> <label class="form-label" for="txtEmail">Email</label> <asp:TextBox ID="txtEmail" runat="server" CssClass="form-control" TextMode="Email" placeholder="you@example.com" ClientIDMode="Static" /> </div> <button type="button" class="btn btn-primary" data-ms-step="2">Next</button> </div> <div class="step-panel" id="sp2" style="max-width:420px;"> <p>Please upload your ID document:</p> <script>window.onDocUploaded = function (file) { if (typeof window.handleDocUploaded === 'function') window.handleDocUploaded(file); };</script> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onDocUploaded" /> <div id="msUploadStatus" class="small text-muted mt-2" aria-live="polite"></div> <div class="mt-3"> <button type="button" class="btn btn-secondary me-2" data-ms-step="1">Back</button> <button type="button" class="btn btn-primary" id="msNext2" disabled data-ms-step="3">Next</button> </div> </div> <div class="step-panel" id="sp3" style="max-width:420px;"> <div class="alert alert-success">All steps complete. Ready to submit!</div> <button type="button" class="btn btn-secondary me-2" data-ms-step="2">Back</button> <asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary"
 OnClick="BtnSubmit_Click" /> <asp:Label ID="lblMsResult" runat="server" CssClass="d-block mt-3 text-success fw-bold" role="status" aria-live="polite" Visible="false" /> </div> <div class="code-panel"> <pre><code>&lt;!-- Step 1: Web Forms controls --&gt;
&lt;asp:TextBox ID="txtName" runat="server" CssClass="form-control" /&gt;
&lt;asp:TextBox ID="txtEmail" runat="server" TextMode="Email" /&gt;

&lt;!-- Step 2: AjaxFileUpload --&gt;
&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AutoUpload="true"
 ShowProgress="true"
 OnClientUploadComplete="onDocUploaded" /&gt;

&lt;script&gt;
function onDocUploaded(file) {
 document.getElementById('msNext2').disabled = false;
}
&lt;/script&gt;

&lt;!-- Step 3: Submit --&gt;
&lt;asp:Button ID="BtnSubmit" runat="server" Text="Submit" /&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> function msGoStep(n) {
 for (var i = 1; i <= 3; i++) {
 document.getElementById('sp' + i).classList.toggle('active', i === n);
 var si = document.getElementById('si' + i);
 si.classList.remove('active', 'completed');
 if (i < n) si.classList.add('completed');
 if (i === n) si.classList.add('active');
 }
 }
 window.handleDocUploaded = function (file) {
 document.getElementById('msUploadStatus').textContent = 'Uploaded: ' + file.name;
 document.getElementById('msNext2').disabled = false;
 };
 document.querySelectorAll('[data-ms-step]').forEach(function (button) {
 button.addEventListener('click', function () {
 msGoStep(Number(button.dataset.msStep));
 });
 });
</script>
</asp:Content>
