<%@ Page Title="Photo Gallery Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Photo Gallery Upload - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Photo Gallery Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .gallery-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 gap: 12px;
 margin-top: 16px;
 }
 .gallery-item {
 position: relative;
 border-radius: 8px;
 overflow: hidden;
 aspect-ratio: 1;
 background: #f1f5f9;
 border: 1px solid #e2e8f0;
 }
 .gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
 .gallery-item .overlay {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.55);
 color: #fff;
 font-size: 0.75rem;
 padding: 4px 8px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
</style> 
<div class="demo-card"> <div class="demo-card-header">Photo Gallery Upload</div> <div class="demo-card-body"> <p class="demo-description"> Upload multiple photos and preview them in a responsive grid gallery layout.
 Images are displayed as thumbnails immediately after selection.
 </p> <div class="demo-expect"><strong>What you should see:</strong> images upload into a gallery grid with a lightbox on click. Accepts the common image types.</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 EnableLightbox="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
 AutoUpload="true" /> <div id="galleryGrid" class="gallery-grid"></div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 EnableLightbox="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
 AutoUpload="true" /&gt;

// JavaScript API approach
AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
 autoUpload: true,
 onSelect: function (file) {
 var reader = new FileReader();
 reader.onload = function (e) {
 // Append thumbnail to gallery grid
 grid.appendChild(createThumb(e.target.result, file.name));
 };
 reader.readAsDataURL(file);
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var galleryGrid = document.getElementById('galleryGrid');

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 if (!galleryGrid) return;
 var fileList = Array.isArray(files) ? files : [files];
 fileList.forEach(function(f) {
 var file = f && (f.file || f);
 if (!file) return;
 var reader = new FileReader();
 reader.onload = function(e) {
 var item = document.createElement('div');
 item.className = 'gallery-item';
 var image = document.createElement('img');
 image.src = e.target.result;
 image.alt = file.name ? 'Gallery preview: ' + file.name : 'Gallery preview';
 var overlay = document.createElement('div');
 overlay.className = 'overlay';
 overlay.textContent = file.name;
 item.appendChild(image);
 item.appendChild(overlay);
 if (galleryGrid) galleryGrid.appendChild(item);
 };
 reader.readAsDataURL(file);
 });
 });
 }
</script>
</asp:Content>
