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

        <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.innerHTML = '&lt;img src="' + e.target.result + '"&gt;';
        };
        reader.readAsDataURL(file);
    }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var uploader = AjaxUploader.getInstance('Uploader1');
    if (uploader) {
        uploader.on('select', function(files) {
            var file = Array.isArray(files) ? files[0] : files;
            file = file.file || file;
            var reader = new FileReader();
            reader.onload = function(e) {
                var preview = document.getElementById('avatarPreview');
                preview.innerHTML = '<img src="' + e.target.result + '" alt="Avatar">';
            };
            reader.readAsDataURL(file);
        });
        uploader.on('complete', function() {
            console.log('Avatar uploaded successfully.');
        });
    }
</script>
</asp:Content>
