<%@ Page Title="Custom Queue Table" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Custom Queue Table - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Custom Queue Table</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Custom Queue Table</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Fully custom file queue rendered as a table using the <code>onQueueRender</code>
            callback. Each row shows file name, size, status, and a remove button.
        </p>

        <div id="queueUploader"></div>
        <table class="table table-bordered table-sm mt-3" id="queueTable" style="display:none;">
            <thead><tr><th>File</th><th>Size</th><th>Status</th><th></th></tr></thead>
            <tbody id="queueBody"></tbody>
        </table>

        <div class="code-panel">
            <pre><code>AjaxUploader.create(el, {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    multiple: true,
    autoUpload: false,
    onQueueRender: function (queue) {
        tbody.innerHTML = '';
        queue.forEach(function (item) {
            // Build a custom table row for each queued file
            var row = '&lt;tr&gt;&lt;td&gt;' + item.name + '&lt;/td&gt;'
                + '&lt;td&gt;' + item.status + '&lt;/td&gt;&lt;/tr&gt;';
            tbody.innerHTML += row;
        });
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    AjaxUploader.create(document.getElementById('queueUploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
        multiple: true,
        autoUpload: false,
        onQueueRender: function (queue) {
            var body = document.getElementById('queueBody');
            body.innerHTML = '';
            document.getElementById('queueTable').style.display = queue.length ? '' : 'none';
            queue.forEach(function (item, i) {
                var sizeKB = item.file ? (item.file.size / 1024).toFixed(1) + ' KB' : '-';
                var status = item.status || 'pending';
                var badge = status === 'complete' ? 'bg-success' :
                            status === 'error' ? 'bg-danger' : 'bg-secondary';
                var row = '<tr><td>' + item.name + '</td><td>' + sizeKB + '</td>' +
                    '<td><span class="badge ' + badge + '">' + status + '</span></td>' +
                    '<td><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest(\'tr\').remove()">x</button></td></tr>';
                body.innerHTML += row;
            });
        }
    });
</script>
</asp:Content>
