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