<%@ Page Title="Aspect Ratio Validation" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Aspect Ratio - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Aspect Ratio Validation</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card">
    <div class="demo-card-header">Enforce an image aspect ratio before upload</div>
    <div class="demo-card-body">
        <p class="demo-description">
            New in 5.2: a standalone <code>aspectRatio</code> validator (independent from the image editor).
            Accepts <code>'16:9'</code>, <code>[16,9]</code>, a decimal ratio, or a function
            <code>(w,h) =&gt; boolean | string</code>. Tolerance defaults to 1% and is tunable with
            <code>aspectRatioTolerance</code>.
        </p>
        <div class="demo-expect"><strong>What you should see:</strong> images outside the required aspect ratio are rejected at selection time, before any upload.</div> <p>This demo accepts only 16:9 images (within 1% tolerance).</p>

        <div id="aspectUploader"></div>

        <script>
        (function () {
            function init() {
                if (!window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
                AjaxUploader.create('#aspectUploader', {
                    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
                    multiple: true,
                    autoUpload: false,
                    accept: 'image/*',
                    aspectRatio: '16:9',
                    aspectRatioTolerance: 0.01
                });
            }
            if (document.readyState !== 'loading') init();
            else document.addEventListener('DOMContentLoaded', init);
        })();
        </script>

        <div class="code-panel">
<pre><code>AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
    accept: 'image/*',
    aspectRatio: '16:9',          // also: [16,9], 1.7777, (w,h) =&gt; ...
    aspectRatioTolerance: 0.01    // 1% default
});</code></pre>
        </div>
    </div>
</div>
</asp:Content>
