<%@ Page Title="Thumbnail Grid" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Thumbnail Grid - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Thumbnail Grid</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Image Thumbnail Grid</div> <div class="demo-card-body"> <p class="demo-description"> Display uploaded images in a responsive thumbnail grid. Each thumbnail shows the file name,
 size, and upload status with a smooth transition effect.
 </p> <div class="demo-expect"><strong>What you should see:</strong> uploaded images shown as a responsive thumbnail grid. Accepts the common image types.</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowThumbnails="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp" /> <div id="grid" class="mt-3" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;"></div> <div id="counter" class="mt-2 text-muted small" role="status" aria-live="polite">No images uploaded yet.</div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowThumbnails="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp" /&gt;

// JavaScript API approach
AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 maxFiles: 20,
 allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
 onSelect: function(files) {
 files.forEach(function(f) {
 var reader = new FileReader();
 reader.onload = function(e) {
 addThumbnail(e.target.result, f);
 };
 reader.readAsDataURL(f.file || f);
 });
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> function clampPercent(value) {
 var pct = Number(value);
 if (!isFinite(pct)) return 0;
 return Math.max(0, Math.min(100, Math.round(pct)));
 }
 var grid = document.getElementById('grid');
 var counter = document.getElementById('counter');
 var imageCount = 0;

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 if (!grid || !counter) return;
 files.forEach(function(f) {
 var file = f && (f.file || f);
 if (!file) return;
 var reader = new FileReader();
 reader.onload = function(e) {
 imageCount++;
 var card = document.createElement('div');
 card.className = 'border rounded overflow-hidden';
 card.style.cssText = 'opacity:0;transition:opacity 0.3s;';
 var imageFrame = document.createElement('div');
 imageFrame.style.cssText = 'height:110px;overflow:hidden;background:#f0f0f0;';
 var image = document.createElement('img');
 image.src = e.target.result;
 image.alt = file.name ? 'Thumbnail preview: ' + file.name : 'Thumbnail preview';
 image.style.cssText = 'width:100%;height:100%;object-fit:cover;';
 imageFrame.appendChild(image);
 var details = document.createElement('div');
 details.className = 'p-2';
 var name = document.createElement('div');
 name.className = 'small text-truncate fw-bold';
 name.textContent = file.name;
 var size = document.createElement('div');
 size.className = 'small text-muted';
 size.textContent = AjaxUploader.formatSize(file.size);
 var progress = document.createElement('div');
 progress.className = 'progress mt-1';
 progress.style.height = '4px';
 var progressBar = document.createElement('div');
 progressBar.className = 'progress-bar';
 progressBar.id = 'bar-' + imageCount;
 progressBar.style.width = '0%';
 progress.appendChild(progressBar);
 details.appendChild(name);
 details.appendChild(size);
 details.appendChild(progress);
 card.appendChild(imageFrame);
 card.appendChild(details);
 grid.appendChild(card);
 requestAnimationFrame(function() { card.style.opacity = '1'; });
 counter.textContent = imageCount + ' image(s) in grid.';
 };
 reader.readAsDataURL(file);
 });
 });
 uploader.on('taskProgress', function(task) {
 if (!grid) return;
 var bars = grid.querySelectorAll('.progress-bar');
 if (bars.length > 0) {
 bars[bars.length - 1].style.width = clampPercent(task.percent) + '%';
 }
 });
 uploader.on('taskComplete', function(task) {
 if (!grid) return;
 var bars = grid.querySelectorAll('.progress-bar');
 if (bars.length > 0) {
 var lastBar = bars[bars.length - 1];
 lastBar.style.width = '100%';
 lastBar.classList.add('bg-success');
 }
 });
 }
</script>
</asp:Content>
