<%@ Page Title="Pause and Resume" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Pause and Resume - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Pause and Resume</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Pause and Resume Uploads</div> <div class="demo-card-body"> <p class="demo-description"> Pause an active upload and resume it later. The upload continues from where it left off,
 making it ideal for large files on unreliable connections.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableChunkedUpload="true"
 ChunkSize="1048576"
 AllowMultiple="true"
 AutoUpload="true" /> <div class="mt-3"> <button type="button" class="btn btn-warning btn-sm" id="btnPause" disabled>Pause All</button> <button type="button" class="btn btn-success btn-sm" id="btnResume" disabled>Resume All</button> </div> <div class="progress mt-3" style="height:20px;"> <div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%">0%</div> </div> <div id="status" class="mt-2 text-muted small" role="status" aria-live="polite"></div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableChunkedUpload="true"
 ChunkSize="1048576"
 AllowMultiple="true"
 AutoUpload="true" /&gt;

// JavaScript API
var uploader = AjaxUploader.getInstance('Uploader1');

// Pause: uploader.pauseAll();
// Resume: uploader.resumeAll();</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var bar = document.getElementById('progressBar');
 var status = document.getElementById('status');
 var btnPause = document.getElementById('btnPause');
 var btnResume = document.getElementById('btnResume');
 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 && typeof AjaxUploader.getInstance === 'function' ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('taskStart', function() {
 if (!btnPause) return;
 btnPause.disabled = false;
 });
 uploader.on('taskProgress', function(task) {
 var pct = clampPercent(task.percent);
 if (!bar || !status) return;
 bar.style.width = pct + '%';
 bar.setAttribute('aria-valuenow', pct);
 bar.textContent = pct + '%';
 var loaded = window.AjaxUploader && AjaxUploader.formatSize ? AjaxUploader.formatSize(task.loaded) : (task.loaded || 0) + ' B';
 var total = window.AjaxUploader && AjaxUploader.formatSize ? AjaxUploader.formatSize(task.total) : (task.total || 0) + ' B';
 status.textContent = task.fileName + ': ' + loaded + ' / ' + total;
 });
 uploader.on('taskComplete', function(task) {
 if (!bar || !status || !btnPause || !btnResume) return;
 bar.style.width = '100%';
 bar.setAttribute('aria-valuenow', 100);
 bar.textContent = 'Complete';
 bar.classList.add('bg-success');
 status.textContent = task.fileName + ' uploaded successfully.';
 btnPause.disabled = true;
 btnResume.disabled = true;
 });
 }

 if (btnPause) btnPause.addEventListener('click', function() {
 if (uploader && uploader.pauseAll) uploader.pauseAll();
 if (bar) bar.classList.add('bg-warning');
 if (status) status.textContent = 'Upload paused.';
 btnPause.disabled = true;
 if (btnResume) btnResume.disabled = false;
 });

 if (btnResume) btnResume.addEventListener('click', function() {
 if (uploader && uploader.resumeAll) uploader.resumeAll();
 if (bar) bar.classList.remove('bg-warning');
 if (status) status.textContent = 'Resuming...';
 if (btnPause) btnPause.disabled = false;
 btnResume.disabled = true;
 });
</script>
</asp:Content>
