<%@ 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>
