<%@ Page Title="Avatar Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Avatar Upload - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Avatar Upload</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<style> .avatar-wrapper {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 }
 .avatar-circle {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background: #e2e8f0;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: center;
 border: 3px solid #cbd5e1;
 font-size: 0.85rem;
 color: #94a3b8;
 }
 .avatar-circle img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 }
</style> 
<div class="demo-card"> <div class="demo-card-header">Avatar / Profile Picture Upload</div> <div class="demo-card-body"> <p class="demo-description"> Upload a profile picture with a circular preview. The selected image is shown
 in a round crop frame before uploading, simulating a typical avatar picker.
 </p> <div class="demo-expect"><strong>What you should see:</strong> one image at a time with a square (1:1) crop for profile pictures - <code>.jpg/.jpeg/.png/.webp</code> up to 5&nbsp;MB. Choosing again replaces the previous avatar.</div> <div class="avatar-wrapper"> <div class="avatar-circle" id="avatarPreview">No photo</div> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="false"
 CropAspectRatio="1"
 AllowedExtensions=".jpg,.jpeg,.png,.webp"
 MaxFileSize="5242880"
 AutoUpload="true" /> <div id="avatarStatus" class="small text-muted" aria-live="polite"></div> </div> <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="false"
 CropAspectRatio="1"
 AllowedExtensions=".jpg,.jpeg,.png,.webp"
 MaxFileSize="5242880"
 AutoUpload="true" /&gt;

// JavaScript API approach
AjaxUploader.create(el, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: false,
 allowedExtensions: '.jpg,.jpeg,.png,.webp',
 maxFileSize: 5 * 1024 * 1024,
 autoUpload: true,
 onSelect: function (file) {
 var reader = new FileReader();
 reader.onload = function (e) {
 avatarCircle.textContent = '';
 var image = document.createElement('img');
 image.src = e.target.result;
 avatarCircle.appendChild(image);
 };
 reader.readAsDataURL(file);
 }
});</code></pre> </div> </div>
</div> 
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script> var uploader = window.AjaxUploader && AjaxUploader.getInstance ? AjaxUploader.getInstance('Uploader1') : null;
 if (uploader) {
 uploader.on('select', function(files) {
 var file = Array.isArray(files) ? files[0] : files;
 file = file && (file.file || file);
 if (!file) return;
 var reader = new FileReader();
 reader.onload = function(e) {
 var preview = document.getElementById('avatarPreview');
 if (!preview) return;
 preview.textContent = '';
 var image = document.createElement('img');
 image.src = e.target.result;
 image.alt = file.name ? 'Avatar preview: ' + file.name : 'Avatar preview';
 preview.appendChild(image);
 };
 reader.readAsDataURL(file);
 });
 uploader.on('complete', function() {
 var status = document.getElementById('avatarStatus');
 if (status) status.textContent = 'Avatar uploaded successfully.';
 });
 }
</script>
</asp:Content>
