<%@ Page Title="Card-Based File List" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Card-Based File List - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Card-Based File List</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .file-cards { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
 .file-card {
 width: 180px; padding: 14px; border: 1px solid #e2e8f0;
 border-radius: 10px; background: #f8fafc; text-align: center;
 }
 .file-card .icon { font-size: 2rem; color: #64748b; }
 .file-card .name { font-size: 0.8rem; margin-top: 6px; word-break: break-all; }
 .file-card .size { font-size: 0.7rem; color: #94a3b8; }
 .file-card.done { border-color: #22c55e; }
</style> 
<div class="demo-card"> <div class="demo-card-header">Card-Based File List</div> <div class="demo-card-body"> <p class="demo-description"> Display uploaded files as styled cards instead of a list. Each card shows an
 icon, file name, size, and a status indicator.
 </p> <div class="demo-expect"><strong>What you should see:</strong> each file rendered as your own card - thumbnail, name, size, bar - built from the event callbacks instead of the built-in queue.</div> <div id="cardUploader"></div> <div class="file-cards" id="fileCards"></div> <div class="code-panel"> <pre><code>onSelect: function (file) {
 var card = document.createElement('div');
 card.className = 'file-card';
 var name = document.createElement('div');
 name.className = 'name';
 name.textContent = file.name;
 var size = document.createElement('div');
 size.className = 'size';
 size.textContent = (file.size/1024).toFixed(1) + ' KB';
 card.appendChild(name);
 card.appendChild(size);
 container.appendChild(card);
},
onComplete: function (file) {
 // Mark card as done
 card.classList.add('done');
}</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> (function () {
 var host = document.getElementById('cardUploader');
 var cards = document.getElementById('fileCards');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onSelect: function (file) {
 var card = document.createElement('div');
 card.className = 'file-card';
 card.id = 'card-' + file.name.replace(/\W/g, '_');
 var icon = document.createElement('div');
 icon.className = 'icon';
 var name = document.createElement('div');
 name.className = 'name';
 name.textContent = file.name;
 var size = document.createElement('div');
 size.className = 'size';
 size.textContent = (file.size / 1024).toFixed(1) + ' KB';
 card.appendChild(icon);
 card.appendChild(name);
 card.appendChild(size);
 if (cards) cards.appendChild(card);
 },
 onComplete: function (file) {
 var card = document.getElementById('card-' + file.name.replace(/\W/g, '_'));
 if (card) card.classList.add('done');
 }
 });
 })();
</script>
</asp:Content>
