<%@ 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.0 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" style="width:0%">0%</div> </div> <div id="status" class="mt-2 text-muted small"></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');

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('taskStart', function() {
 btnPause.disabled = false;
 });
 uploader.on('taskProgress', function(task) {
 var pct = Math.round(task.percent);
 bar.style.width = pct + '%';
 bar.textContent = pct + '%';
 status.textContent = task.fileName + ': ' + AjaxUploader.formatSize(task.loaded) +
 ' / ' + AjaxUploader.formatSize(task.total);
 });
 uploader.on('taskComplete', function(task) {
 bar.style.width = '100%';
 bar.textContent = 'Complete';
 bar.classList.add('bg-success');
 status.textContent = task.fileName + ' uploaded successfully.';
 btnPause.disabled = true;
 btnResume.disabled = true;
 });
 }

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

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