<%@ Page Title="CMS Media Library" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">CMS Media Library - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">CMS Media Library Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .media-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
 .media-grid {
 display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
 gap: 10px; min-height: 100px; background: #f9fafb; border: 1px dashed #d1d5db;
 border-radius: 8px; padding: 12px;
 }
 .media-item {
 text-align: center; padding: 12px 6px; background: #fff;
 border: 1px solid #e2e8f0; border-radius: 8px; font-size: 0.75rem;
 word-break: break-all;
 }
 .media-item .icon { font-size: 1.8rem; margin-bottom: 4px; }
</style> 
<div class="demo-card"> <div class="demo-card-header">CMS Media Library Upload</div> <div class="demo-card-body"> <p class="demo-description"> A media library interface for a content management system. Upload images and
 documents, then browse them in a grid with file type icons.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a media-library flow: drop assets, get thumbnails in a grid, uploads land in the library list.</div> <div class="media-toolbar"> <strong>Media Library</strong> <div id="cmsUploader"></div> </div> <div class="media-grid" id="mediaGrid"> <div class="media-item"><div class="icon"></div>banner.jpg</div> <div class="media-item"><div class="icon"></div>terms.pdf</div> </div> <div class="code-panel"> <pre><code>AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onComplete: function (file) {
 var ext = file.name.split('.').pop().toLowerCase();
 var icon = isImage(ext) ? 'image-icon' : 'doc-icon';
 mediaGrid.appendChild(createMediaItem(icon, file.name));
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> document.addEventListener('DOMContentLoaded', function () {
 var host = document.getElementById('cmsUploader');
 var mediaGrid = document.getElementById('mediaGrid');
 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 onComplete: function (file) {
 var name = (file && file.name) ? file.name : 'file';
 var ext = name.indexOf('.') >= 0 ? name.split('.').pop().toLowerCase() : '';
 var isImage = ['jpg','jpeg','png','gif','webp'].indexOf(ext) >= 0;
 var icon = isImage ? 'IMG' : 'DOC';
 var item = document.createElement('div');
 item.className = 'media-item';
 var iconEl = document.createElement('div');
 iconEl.className = 'icon';
 iconEl.textContent = icon;
 item.appendChild(iconEl);
 item.appendChild(document.createTextNode(name));
 if (mediaGrid) mediaGrid.appendChild(item);
 }
 });
 });
</script>
</asp:Content>
