Drop an image and the browser generates scaled renditions alongside the original — here a 200px thumbnail and a 1024px WebP — and uploads all of them together. Renditions are resized off the main thread (Web Worker), named photo.thumb.jpg-style, and linked to the parent via renditionOf so the server can associate the stored files. A failed rendition never blocks the original. NOTE: include the rendition output format (here .webp) in Extensions — transcoded renditions are validated like any other upload.
What you should see: drop one image and three files upload: the original, a 200px .thumb.jpg, and a 1024px .medium.webp — each logged below as it is generated.
Drag & drop files here, or paste from clipboard
<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" />
<script>
function renditionLogger(rend, original) {
console.log(rend.fileName + ' generated for ' + original.fileName);
}
</script>