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

        <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 = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            var fileList = Array.isArray(files) ? files : [files];
            fileList.forEach(function(f) {
                var file = f.file || f;
                var reader = new FileReader();
                reader.onload = function(e) {
                    var item = document.createElement('div');
                    item.className = 'gallery-item';
                    item.innerHTML = '<img src="' + e.target.result + '" alt="Preview">' +
                        '<div class="overlay">' + file.name + '</div>';
                    galleryGrid.appendChild(item);
                };
                reader.readAsDataURL(file);
            });
        });
    }
</script>
</asp:Content>
