<%@ 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.2 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;"> <caption class="visually-hidden">Queued files awaiting upload</caption> <thead><tr><th scope="col">File</th><th scope="col">Size</th><th scope="col">Status</th><th scope="col"><span class="visually-hidden">Actions</span></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.textContent = '';
 queue.forEach(function (item) {
 // Build a custom table row for each queued file
 var row = document.createElement('tr');
 var nameCell = document.createElement('td');
 nameCell.textContent = item.name;
 var statusCell = document.createElement('td');
 statusCell.textContent = item.status;
 row.appendChild(nameCell);
 row.appendChild(statusCell);
 tbody.appendChild(row);
 });
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var host = document.getElementById('queueUploader');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: false,
 onQueueRender: function (queue) {
 var body = document.getElementById('queueBody');
 var table = document.getElementById('queueTable');
 if (!body || !table) return;
 body.textContent = '';
 table.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 = document.createElement('tr');
 var nameCell = document.createElement('td');
 nameCell.textContent = item.name || item.fileName || 'File';
 var sizeCell = document.createElement('td');
 sizeCell.textContent = sizeKB;
 var statusCell = document.createElement('td');
 var statusBadge = document.createElement('span');
 statusBadge.className = 'badge ' + badge;
 statusBadge.textContent = status;
 statusCell.appendChild(statusBadge);
 var actionCell = document.createElement('td');
 var removeButton = document.createElement('button');
 removeButton.type = 'button';
 removeButton.className = 'btn btn-sm btn-outline-danger';
 removeButton.textContent = 'x';
 removeButton.addEventListener('click', function () {
 row.remove();
 });
 actionCell.appendChild(removeButton);
 row.appendChild(nameCell);
 row.appendChild(sizeCell);
 row.appendChild(statusCell);
 row.appendChild(actionCell);
 body.appendChild(row);
 });
 }
 });
 })();
</script>
</asp:Content>
