<%@ Page Title="Image Preview" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Image Preview - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Image Preview</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Preview Images Before Upload</div> <div class="demo-card-body"> <p class="demo-description"> <strong>Preview selected images before uploading.</strong> Users can review their selections
 and remove unwanted images before starting the upload. v5.3 auto-decodes <strong>HEIC</strong> (iPhone) into JPEG/PNG for preview, applies EXIF orientation, and can run images through
 up to 5 preset sizes before transfer.
 </p> <div class="demo-expect"><strong>What you should see:</strong> a local thumbnail for every selected image before anything uploads. Auto-upload is off so you can review the set first.</div> <p class="demo-description" style="margin-top:0.5rem;"> <strong>Related:</strong> <a href="../V5Features/ImageEditorPro.aspx">image editor (smart-crop, overlays, AVIF) <span style="background:rgba(13,148,136,0.15);color:#0f766e;font-size:.55rem;font-weight:700;padding:.1rem .35rem;border-radius:999px;letter-spacing:.1em;">5.2</span></a>,
 <a href="../V5Features/ImageEditorCrop.aspx">crop + annotation editor</a>,
 <a href="ImageResize.aspx">preset resize</a>,
 <a href="AvatarUpload.aspx">avatar crop</a>.
 </p> <au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableImagePreview="true"
 ShowThumbnails="true"
 AllowMultiple="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
 AutoUpload="false" /> <div id="previewArea" class="mt-3 d-flex flex-wrap gap-3"></div> <div class="mt-2"> <button type="button" class="btn btn-primary btn-sm" id="btnUpload" style="display:none;">Upload Selected</button> </div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 EnableImagePreview="true"
 ShowThumbnails="true"
 AllowMultiple="true"
 AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
 AutoUpload="false" /&gt;

// JavaScript API approach
AjaxUploader.create('#uploader', {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
 autoUpload: false,
 onSelect: function(files) {
 files.forEach(function(f) {
 var reader = new FileReader();
 reader.onload = function(e) {
 showPreview(e.target.result, f.name);
 };
 reader.readAsDataURL(f.file || f);
 });
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var previewArea = document.getElementById('previewArea');
 var btnUpload = document.getElementById('btnUpload');

 var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 if (!previewArea || !btnUpload) return;
 files.forEach(function(f) {
 var file = f && (f.file || f);
 if (!file) return;
 var reader = new FileReader();
 reader.onload = function(e) {
 var card = document.createElement('div');
 card.className = 'text-center border rounded p-2';
 card.style.cssText = 'width:130px;position:relative;';
 var image = document.createElement('img');
 image.src = e.target.result;
 image.alt = file.name ? 'Preview of ' + file.name : 'Selected image preview';
 image.style.cssText = 'width:110px;height:80px;object-fit:cover;border-radius:4px;';
 var name = document.createElement('div');
 name.className = 'small text-truncate mt-1';
 name.style.maxWidth = '110px';
 name.textContent = file.name;
 var size = document.createElement('div');
 size.className = 'small text-muted';
 size.textContent = AjaxUploader.formatSize(file.size);
 var removeButton = document.createElement('button');
 removeButton.type = 'button';
 removeButton.className = 'btn btn-outline-danger btn-sm mt-1';
 removeButton.style.fontSize = '.7rem';
 removeButton.textContent = 'Remove';
 removeButton.addEventListener('click', function () {
 card.remove();
 });
 card.appendChild(image);
 card.appendChild(name);
 card.appendChild(size);
 card.appendChild(removeButton);
 if (previewArea) previewArea.appendChild(card);
 };
 reader.readAsDataURL(file);
 });
 btnUpload.style.display = 'inline-block';
 });
 uploader.on('taskComplete', function(task) {
 if (!btnUpload) return;
 btnUpload.style.display = 'none';
 btnUpload.disabled = false;
 btnUpload.textContent = 'Upload Selected';
 });
 }

 if (btnUpload) btnUpload.addEventListener('click', function() {
 if (uploader && typeof uploader.startUpload === 'function') uploader.startUpload();
 btnUpload.disabled = true;
 btnUpload.textContent = 'Uploading...';
 });
</script>
</asp:Content>
