<%@ Page Title="Wizard / Stepper Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Wizard / Stepper Upload - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Wizard / Stepper Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .wizard-steps { display: flex; gap: 0; margin-bottom: 16px; }
 .wizard-step {
 flex: 1; text-align: center; padding: 10px; background: #f1f5f9;
 border: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b;
 }
 .wizard-step.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
 .wizard-step.done { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
 .wizard-pane { display: none; }
 .wizard-pane.active { display: block; }
</style> 
<div class="demo-card"> <div class="demo-card-header">Wizard / Stepper Upload</div> <div class="demo-card-body"> <p class="demo-description"> Integrate a file upload into step 2 of a multi-step wizard. Users must upload
 a file before advancing to the final step.
 </p> <div class="wizard-steps"> <div class="wizard-step active" id="ws1">1. Info</div> <div class="wizard-step" id="ws2">2. Upload</div> <div class="wizard-step" id="ws3">3. Confirm</div> </div> <div class="wizard-pane active" id="wp1"> <p>Enter your name:</p> <input type="text" class="form-control mb-3" placeholder="Full Name" id="wizName"> <button type="button" class="btn btn-primary" onclick="goStep(2)">Next</button> </div> <div class="wizard-pane" id="wp2"> <p>Upload your document:</p> <div id="wizUploader"></div> <div id="wizFile" class="mt-2 small text-muted"></div> <button type="button" class="btn btn-secondary me-2" onclick="goStep(1)">Back</button> <button type="button" class="btn btn-primary" id="wizNext2" disabled onclick="goStep(3)">Next</button> </div> <div class="wizard-pane" id="wp3"> <p class="text-success fw-bold">All done! Your submission is ready.</p> <button type="button" class="btn btn-secondary" onclick="goStep(2)">Back</button> </div> <div class="code-panel"> <pre><code>// Step 2: upload required before proceeding
AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 autoUpload: true,
 onComplete: function (file) {
 document.getElementById('nextBtn').disabled = false;
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> function goStep(n) {
 document.querySelectorAll('.wizard-pane').forEach(function (p) { p.classList.remove('active'); });
 document.querySelectorAll('.wizard-step').forEach(function (s, i) {
 s.classList.remove('active', 'done');
 if (i < n - 1) s.classList.add('done');
 if (i === n - 1) s.classList.add('active');
 });
 document.getElementById('wp' + n).classList.add('active');
 }
 AjaxUploader.create(document.getElementById('wizUploader'), {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 document.getElementById('wizFile').textContent = 'Uploaded: ' + file.name;
 document.getElementById('wizNext2').disabled = false;
 }
 });
</script>
</asp:Content>
