<%@ 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.0 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="mb-3"> <label class="form-label fw-bold">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" 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 = '/thank-you?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 = [];

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('taskProgress', function(task) {
 bar.style.width = Math.round(task.percent) + '%';
 });
 uploader.on('taskComplete', function(task) {
 uploadedFiles.push(task.fileName);
 });
 uploader.on('complete', function() {
 bar.style.width = '100%';
 var action = actionType.value;
 result.style.display = 'block';

 if (action === 'message') {
 result.className = 'mt-3 alert alert-success';
 result.innerHTML = '<strong>Upload Complete!</strong> ' +
 uploadedFiles.length + ' file(s) uploaded successfully: ' +
 uploadedFiles.join(', ');
 } else if (action === 'redirect') {
 result.className = 'mt-3 alert alert-info';
 result.innerHTML = '<strong>Redirect:</strong> Would navigate to ' +
 '<code>/thank-you?files=' + uploadedFiles.length + '</code>';
 } else if (action === 'callback') {
 result.className = 'mt-3 alert alert-warning';
 result.innerHTML = '<strong>API Call:</strong> Would POST to ' +
 '<code>/api/process</code> with ' + uploadedFiles.length + ' file references.';
 }
 uploadedFiles = [];
 });
 }
</script>
</asp:Content>
