<%@ 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.2 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="demo-expect"><strong>What you should see:</strong> upload as one step of a wizard - the step only advances when the file finishes.</div> <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"> <label class="form-label" for="wizName">Full name</label> <input type="text" class="form-control mb-3" placeholder="Full Name" id="wizName"> <button type="button" class="btn btn-primary" data-step="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" data-step="1">Back</button> <button type="button" class="btn btn-primary" id="wizNext2" disabled data-step="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" data-step="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');
 });
 var pane = document.getElementById('wp' + n);
 if (pane) pane.classList.add('active');
 }
 document.querySelectorAll('[data-step]').forEach(function (button) {
 button.addEventListener('click', function () {
 goStep(Number(button.dataset.step));
 });
 });
 var host = document.getElementById('wizUploader');
 if (host && window.AjaxUploader && typeof AjaxUploader.create === 'function') {
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 autoUpload: true,
 onComplete: function (file) {
 var fileStatus = document.getElementById('wizFile');
 var nextButton = document.getElementById('wizNext2');
 if (fileStatus) fileStatus.textContent = 'Uploaded: ' + file.name;
 if (nextButton) nextButton.disabled = false;
 }
 });
 }
</script>
</asp:Content>
