<%@ Page Title="Multi-Rendition Upload" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Multi-Rendition Upload - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Multi-Rendition Upload</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card"> <div class="demo-card-header">Upload an image plus scaled renditions in one pass</div> <div class="demo-card-body"> <p class="demo-description"> Drop an image and the browser generates <strong>scaled renditions</strong> alongside the original &mdash; here a 200px thumbnail and a 1024px WebP &mdash; and uploads all of them together. Renditions are resized off the main thread (Web Worker), named <code>photo.thumb.jpg</code>-style, and linked to the parent via <code>renditionOf</code> so the server can associate the stored files. A failed rendition never blocks the original. NOTE: include the rendition output format (here <code>.webp</code>) in <code>Extensions</code> &mdash; transcoded renditions are validated like any other upload.
 </p>
 <div class="demo-expect"><strong>What you should see:</strong> drop one image and three files upload: the original, a 200px <code>.thumb.jpg</code>, and a 1024px <code>.medium.webp</code> &mdash; each logged below as it is generated.</div>
 <script>
 function renditionLogger(rend, original) {
 var log = document.getElementById('renditionLog');
 if (log) log.innerHTML += '<div>&#10133; generated <code>' + rend.fileName + '</code> (' + Math.round(rend.fileSize / 1024) + ' KB) for <code>' + original.fileName + '</code></div>';
 }
 </script>
 <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ShowProgress="true"
 Extensions=".jpg,.jpeg,.png,.gif,.webp"
 Renditions='[{"name":"thumb","maxSize":200},{"name":"medium","maxWidth":1024,"maxHeight":1024,"format":"image/webp","quality":0.8}]'
 OnClientRenditionCreated="renditionLogger" />
 <div id="renditionLog" class="mt-3 text-muted small"></div>
 <div class="code-panel"> <pre><code>&lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 Extensions=".jpg,.jpeg,.png,.gif,.webp"
 Renditions='[{"name":"thumb","maxSize":200},
              {"name":"medium","maxWidth":1024,"maxHeight":1024,
               "format":"image/webp","quality":0.8}]'
 OnClientRenditionCreated="renditionLogger" /&gt;

&lt;script&gt;
function renditionLogger(rend, original) {
    console.log(rend.fileName + ' generated for ' + original.fileName);
}
&lt;/script&gt;</code></pre> </div>
</div> </div>
</asp:Content>
