<%@ Page Title="On Complete Redirect" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">On Complete Redirect - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">On Complete Redirect</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Redirect After All Uploads Complete</div> <div class="demo-card-body"> <p class="demo-description"> Perform an action after all files have been uploaded. Common use cases include redirecting
 to a success page, showing a confirmation dialog, or triggering server-side processing.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the page navigates after uploads finish - fired from the completion callback, so the redirect happens once the work is actually done.</div> <div class="mb-3"> <label class="form-label fw-bold" for="actionType">Action after completion</label> <select id="actionType" class="form-select" style="width:auto;"> <option value="message">Show Success Message</option> <option value="redirect">Redirect to Thank You Page</option> <option value="callback">Call Server API</option> </select> </div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowProgress="true" /> <div class="progress mt-3" style="height:6px;"> <div id="progressBar" class="progress-bar" style="width:0%;"></div> </div> <div id="result" class="mt-3" role="status" aria-live="polite" style="display:none;"></div> <div class="code-panel"> <pre><code>var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('complete', function() {
 // Option 1: Show message
 showSuccessMessage();

 // Option 2: Redirect
 // window.location.href = '/Demos/Events/UploadComplete.aspx?files=' + count;

 // Option 3: API call
 // fetch('/api/process', { method: 'POST' });
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var bar = document.getElementById('progressBar');
 var result = document.getElementById('result');
 var actionType = document.getElementById('actionType');
 var uploadedFiles = [];
 function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('taskProgress', function(task) {
 if (bar) bar.style.width = clampPercent(task.percent) + '%';
 });
 uploader.on('taskComplete', function(task) {
 uploadedFiles.push(task.fileName);
 });
 uploader.on('complete', function() {
 if (bar) bar.style.width = '100%';
 var action = actionType ? actionType.value : 'message';
 if (!result) return;
 result.style.display = 'block';

 if (action === 'message') {
 result.className = 'mt-3 alert alert-success';
 result.textContent = '';
 var strong = document.createElement('strong');
 strong.textContent = 'Upload Complete!';
 result.appendChild(strong);
 result.appendChild(document.createTextNode(' ' + uploadedFiles.length + ' file(s) uploaded successfully: ' + uploadedFiles.join(', ')));
 } else if (action === 'redirect') {
 result.className = 'mt-3 alert alert-info';
 result.textContent = '';
 var label = document.createElement('strong');
 label.textContent = 'Redirect:';
 var code = document.createElement('code');
 code.textContent = '/Demos/Events/UploadComplete.aspx?files=' + uploadedFiles.length;
 result.appendChild(label);
 result.appendChild(document.createTextNode(' Would navigate to '));
 result.appendChild(code);
 } else if (action === 'callback') {
 result.className = 'mt-3 alert alert-warning';
 result.textContent = '';
 var apiLabel = document.createElement('strong');
 apiLabel.textContent = 'API Call:';
 var apiCode = document.createElement('code');
 apiCode.textContent = '/api/process';
 result.appendChild(apiLabel);
 result.appendChild(document.createTextNode(' Would POST to '));
 result.appendChild(apiCode);
 result.appendChild(document.createTextNode(' with ' + uploadedFiles.length + ' file references.'));
 }
 uploadedFiles = [];
 });
 }
</script>
</asp:Content>
