<%@ Page Title="E-Commerce Product Images" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">E-Commerce Product Images - AjaxUploader v5.0 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">Product Name</label> <asp:TextBox ID="txtProductName" runat="server" CssClass="form-control" placeholder="Wireless Headphones" /> </div> <div class="mb-3"> <label class="form-label">Product Images (click to set primary)</label> <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">Price</label> <asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" placeholder="$49.99" /> </div> <div class="mb-3"> <label class="form-label">Category</label> <asp:DropDownList ID="ddlCategory" runat="server" 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> </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> function onProductImageSelect(file) {
 var reader = new FileReader();
 reader.onload = function (e) {
 var div = document.createElement('div');
 div.className = 'product-img';
 div.innerHTML = '<img src="' + e.target.result + '" alt="Product">';
 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');
 div.innerHTML += '<span class="badge-primary">Primary</span>';
 });
 var container = document.getElementById('productImages');
 if (!container.children.length) {
 div.classList.add('primary');
 div.innerHTML += '<span class="badge-primary">Primary</span>';
 }
 container.appendChild(div);
 };
 reader.readAsDataURL(file);
 }
</script>
</asp:Content>
