<%@ Page Title="E-Commerce Product Images" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>
<script runat="server"> protected void BtnSaveProduct_Click(object sender, EventArgs e)
 {
 lblSaveResult.Text = "Saved product: " + Server.HtmlEncode(txtProductName.Text)
 + " (" + Server.HtmlEncode(ddlCategory.SelectedValue) + ", "
 + Server.HtmlEncode(txtPrice.Text) + ")";
 lblSaveResult.Visible = true;
 }
</script>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">E-Commerce Product Images - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">E-Commerce Product Images</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .product-form { max-width: 480px; }
 .product-images {
 display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px;
 }
 .product-img {
 width: 100px; height: 100px; border-radius: 8px; overflow: hidden;
 border: 2px solid #e2e8f0; position: relative; cursor: pointer;
 }
 .product-img img { width: 100%; height: 100%; object-fit: cover; }
 .product-img.primary { border-color: #3b82f6; }
 .product-img .badge-primary {
 position: absolute; top: 4px; left: 4px; font-size: 0.6rem;
 background: #3b82f6; color: #fff; padding: 2px 6px; border-radius: 4px;
 }
</style> 
<div class="demo-card"> <div class="demo-card-header">E-Commerce Product Images</div> <div class="demo-card-body"> <p class="demo-description"> Upload product images for an e-commerce listing. Supports multiple images
 with a primary image selector. Uses Web Forms controls for product fields.
 </p> <div class="product-form"> <div class="mb-3"> <label class="form-label" for="txtProductName">Product Name</label> <asp:TextBox ID="txtProductName" runat="server" ClientIDMode="Static" CssClass="form-control" placeholder="Wireless Headphones" /> </div> <div class="mb-3"> <div class="form-label">Product Images (click to set primary)</div> <script>window.onProductImageSelect = function (file) { if (typeof window.handleProductImageSelect === 'function') window.handleProductImageSelect(file); };</script> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="true"
 AllowedExtensions="jpg,jpeg,png,webp"
 ShowProgress="true"
 OnClientFileSelected="onProductImageSelect" /> <div class="product-images" id="productImages"></div> </div> <div class="mb-3"> <label class="form-label" for="txtPrice">Price</label> <asp:TextBox ID="txtPrice" runat="server" ClientIDMode="Static" CssClass="form-control" placeholder="$49.99" /> </div> <div class="mb-3"> <label class="form-label" for="ddlCategory">Category</label> <asp:DropDownList ID="ddlCategory" runat="server" ClientIDMode="Static" CssClass="form-select"> <asp:ListItem Text="Electronics" Value="electronics" /> <asp:ListItem Text="Clothing" Value="clothing" /> <asp:ListItem Text="Home & Garden" Value="home" /> </asp:DropDownList> </div> <asp:Button ID="BtnSaveProduct" runat="server" Text="Save Product"
 CssClass="btn btn-primary" OnClick="BtnSaveProduct_Click" /> <asp:Label ID="lblSaveResult" runat="server" CssClass="d-block mt-3 text-success fw-bold" role="status" aria-live="polite" Visible="false" /> </div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 AutoUpload="true"
 AllowedExtensions="jpg,jpeg,png,webp"
 ShowProgress="true"
 OnClientFileSelected="onProductImageSelect" /&gt;

&lt;asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" /&gt;
&lt;asp:DropDownList ID="ddlCategory" runat="server" CssClass="form-select"&gt;
 &lt;asp:ListItem Text="Electronics" Value="electronics" /&gt;
&lt;/asp:DropDownList&gt;</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> window.handleProductImageSelect = function (file) {
 var selectedFile = file && (file.file || file);
 if (!selectedFile) return;
 var reader = new FileReader();
 reader.onload = function (e) {
 var div = document.createElement('div');
 div.className = 'product-img';
 var image = document.createElement('img');
 image.src = e.target.result;
 image.alt = selectedFile.name ? 'Product image preview: ' + selectedFile.name : 'Product image preview';
 div.appendChild(image);
 div.addEventListener('click', function () {
 document.querySelectorAll('.product-img').forEach(function (p) {
 p.classList.remove('primary');
 var b = p.querySelector('.badge-primary');
 if (b) b.remove();
 });
 div.classList.add('primary');
 addPrimaryBadge(div);
 });
 var container = document.getElementById('productImages');
 if (!container) return;
 if (!container.children.length) {
 div.classList.add('primary');
 addPrimaryBadge(div);
 };
 container.appendChild(div);
 };
 reader.readAsDataURL(selectedFile);
 };

 function addPrimaryBadge(container) {
 var badge = document.createElement('span');
 badge.className = 'badge-primary';
 badge.textContent = 'Primary';
 container.appendChild(badge);
 }
</script>
</asp:Content>
