<%@ 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.3 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) return;
 var entry = document.createElement('div');
 var renditionName = document.createElement('code');
 var originalName = document.createElement('code');
 renditionName.textContent = rend.fileName || '(unnamed rendition)';
 originalName.textContent = original.fileName || '(unnamed original)';
 entry.appendChild(document.createTextNode('Generated '));
 entry.appendChild(renditionName);
 entry.appendChild(document.createTextNode(' (' + Math.round((rend.fileSize || 0) / 1024) + ' KB) for '));
 entry.appendChild(originalName);
 log.appendChild(entry);
 }
 </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) {
    // Use textContent so uploaded filenames never become HTML.
    var name = document.createElement('code');
    name.textContent = rend.fileName;
    document.getElementById('renditionLog').appendChild(name);
}
&lt;/script&gt;</code></pre> </div>
</div> </div>
</asp:Content>
