<%@ Page Title="Cancel Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Cancel Upload - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Cancel Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Cancel Individual or All Uploads</div> <div class="demo-card-body"> <p class="demo-description"> Cancel a specific file upload or cancel all queued uploads at once. Cancelled uploads
 are removed from the queue and any partial data on the server is cleaned up.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="true"
 ShowProgress="true" /> <div class="mt-2"> <button type="button" class="btn btn-danger btn-sm" id="btnCancelAll" disabled>Cancel All</button> </div> <div id="queueList" class="mt-3"></div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="true"
 ShowProgress="true" /&gt;

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

// Cancel one: uploader.cancelTask(taskId);
// Cancel all: uploader.cancelAll();</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var queueList = document.getElementById('queueList');
 var btnCancelAll = document.getElementById('btnCancelAll');

 var uploader = AjaxUploader.getInstance('Uploader1');
 if (uploader) {
 uploader.on('queueRender', function(queue) {
 queueList.innerHTML = '';
 btnCancelAll.disabled = queue.length === 0;
 queue.forEach(function(item) {
 var div = document.createElement('div');
 div.className = 'p-2 mb-1 border rounded d-flex justify-content-between align-items-center';
 var statusText = item.status === 'uploading' ? Math.round(item.percent) + '%' : item.status;
 var badge = item.status === 'complete' ? 'bg-success' :
 item.status === 'uploading' ? 'bg-primary' :
 item.status === 'cancelled' ? 'bg-danger' : 'bg-secondary';
 div.innerHTML = '<span>' + item.fileName +
 ' <small class="text-muted">(' + AjaxUploader.formatSize(item.total) + ')</small></span>' +
 '<span class="d-flex align-items-center gap-2">' +
 '<span class="badge ' + badge + '">' + statusText + '</span>' +
 (item.status !== 'complete' && item.status !== 'cancelled' ?
 '<button type="button" class="btn btn-outline-danger btn-sm" data-id="' + item.id + '">Cancel</button>' : '') +
 '</span>';
 queueList.appendChild(div);
 });
 });
 uploader.on('complete', function() {
 btnCancelAll.disabled = true;
 });
 }

 queueList.addEventListener('click', function(e) {
 if (e.target.dataset.id && uploader) {
 uploader.cancelTask(e.target.dataset.id);
 }
 });

 btnCancelAll.addEventListener('click', function() {
 if (uploader) uploader.cancelAll();
 btnCancelAll.disabled = true;
 });
</script>
</asp:Content>
