@inoo-ch/payload-image-optimizer 1.4.7 → 1.5.0

package/AGENT_DOCS.md

@@ -59,6 +59,7 @@ imageOptimizer({
   stripMetadata: true,                              // strip EXIF data
   generateThumbHash: true,                          // generate blur placeholders
   replaceOriginal: true,                            // convert main file to primary format
+  clientOptimization: false,                        // pre-resize in browser before upload
   disabled: false,                                  // keep fields but skip all processing
 })
 ```
@@ -71,6 +72,7 @@ imageOptimizer({
 | `stripMetadata` | `boolean` | `true` | Strip EXIF, ICC, XMP metadata. |
 | `generateThumbHash` | `boolean` | `true` | Generate ThumbHash blur placeholder. |
 | `replaceOriginal` | `boolean` | `true` | Replace the original file with the primary format. |
+| `clientOptimization` | `boolean` | `false` | Pre-resize images in browser via Canvas API before upload. Reduces upload size 90%+ for large images. |
 | `disabled` | `boolean` | `false` | Keep schema fields but disable all processing. |
 
 ### Per-Collection Overrides (`CollectionOptimizerConfig`)
@@ -327,6 +329,29 @@ The plugin registers two Payload job tasks (retries: 2 each):
 | `imageOptimizer_convertFormats` | After upload (`afterChange` hook) | Generate format variants for a single document |
 | `imageOptimizer_regenerateDocument` | Bulk regeneration endpoint | Fully re-optimize a single document (resize + thumbhash + all variants) |
 
+## Vercel / Serverless Deployment
+
+Image processing can exceed the default serverless function timeout. Re-export the plugin's `maxDuration` from the Payload API route:
+
+```ts
+// src/app/(payload)/api/[...slug]/route.ts
+export { maxDuration } from '@inoo-ch/payload-image-optimizer'
+```
+
+This sets a 60-second timeout. Without this, uploads with heavy configs (AVIF + ThumbHash + metadata stripping) may time out on Vercel.
+
+### Large file uploads with Vercel Blob
+
+Even with `maxDuration` and `bodySizeLimit`, large uploads hit Vercel's 4.5MB request body limit on serverless functions. If using `@payloadcms/storage-vercel-blob`, enable `clientUploads: true` so files upload directly from the browser to Vercel Blob (up to 5TB), bypassing the server body size limit entirely:
+
+```ts
+vercelBlobStorage({
+  collections: { media: true },
+  token: process.env.BLOB_READ_WRITE_TOKEN,
+  clientUploads: true,
+})
+```
+
 ## Full Example
 
 ```ts

package/README.md

@@ -86,6 +86,7 @@ imageOptimizer({
   maxDimensions: { width: 2560, height: 2560 },
   generateThumbHash: true,
   stripMetadata: true,
+  clientOptimization: false,
   disabled: false,
 })
 ```
@@ -99,6 +100,7 @@ imageOptimizer({
 | `maxDimensions` | `{ width: number, height: number }` | `{ width: 2560, height: 2560 }` | Maximum image dimensions. Images are resized to fit within these bounds. |
 | `generateThumbHash` | `boolean` | `true` | Generate ThumbHash blur placeholders for instant image previews. |
 | `stripMetadata` | `boolean` | `true` | Remove EXIF and other metadata from images. |
+| `clientOptimization` | `boolean` | `false` | Pre-resize images in the browser before upload using Canvas API. Reduces upload size by up to 90% for large images. |
 | `disabled` | `boolean` | `false` | Disable optimization while keeping schema fields intact. |
 
 ### Per-Collection Overrides
@@ -123,6 +125,27 @@ collections: {
 }
 ```
 
+### Client-Side Optimization
+
+When `clientOptimization: true` is set, images are pre-resized in the browser before uploading. This uses the Canvas API (zero additional dependencies) to shrink large images to fit within `maxDimensions` before they enter the upload pipeline.
+
+```ts
+imageOptimizer({
+  clientOptimization: true,
+  collections: { media: true },
+})
+```
+
+**How it helps:**
+- A 12MB DSLR photo is resized to ~100-500KB *before* upload — 90%+ less data transferred
+- Especially important with cloud storage + `clientUploads: true`, where files round-trip through blob storage
+- Reduces serverless function processing time (smaller input = faster sharp conversion)
+- EXIF metadata is stripped automatically (Canvas output has no metadata)
+
+**What stays server-side:** Format conversion (WebP/AVIF), ThumbHash generation, and variant creation still happen on the server with sharp for quality consistency. The client only handles resize — the highest-impact optimization with zero quality trade-off.
+
+**Limitations:** Only applies to single-file uploads in the admin panel. Bulk uploads and API/programmatic uploads are processed server-side as usual.
+
 ## How It Works
 
 1. **Upload** — An image is uploaded to a configured collection
@@ -133,6 +156,31 @@ collections: {
 
 All format conversion runs as async background jobs, so uploads return immediately.
 
+### Vercel / Serverless Deployment
+
+Image processing (especially AVIF encoding, ThumbHash generation, and metadata stripping) can exceed the default serverless function timeout. The plugin exports a recommended `maxDuration` that you can re-export from your Payload API route:
+
+```ts
+// src/app/(payload)/api/[...slug]/route.ts
+export { maxDuration } from '@inoo-ch/payload-image-optimizer'
+```
+
+This sets a 60-second timeout, which is sufficient for most configurations. Without this, heavy processing configs may cause upload timeouts on Vercel.
+
+#### Large file uploads with Vercel Blob
+
+Even with `maxDuration` and `bodySizeLimit` configured, large file uploads through the Payload admin still go through the Next.js API route, which hits Vercel's request body size limit (4.5MB on serverless functions). If you're using `@payloadcms/storage-vercel-blob`, enable `clientUploads` to bypass this entirely:
+
+```ts
+vercelBlobStorage({
+  collections: { media: true },
+  token: process.env.BLOB_READ_WRITE_TOKEN,
+  clientUploads: true, // uploads go directly from browser to Vercel Blob
+})
+```
+
+With `clientUploads: true`, files upload directly from the browser to Vercel Blob (up to 5TB) and the server only handles the small JSON metadata payload. This eliminates body size limit errors regardless of file size.
+
 ## How It Differs from Payload's Default Image Handling
 
 Payload CMS ships with [sharp](https://sharp.pixelplumbing.com/) built-in and can resize images and generate sizes on upload. This plugin **does not double-process your images** — it intercepts the raw upload in a `beforeChange` hook *before* Payload's own sharp pipeline runs, and writes the optimized buffer back to `req.file.data`. When Payload's built-in `uploadFiles` step kicks in to generate your configured sizes, it works from the already-optimized file, not the raw original.

package/dist/components/UploadOptimizer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UploadOptimizer: React.FC;

package/dist/components/UploadOptimizer.js

@@ -0,0 +1,84 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Upload, useDocumentInfo, useField } from '@payloadcms/ui';
+const MAX_WIDTH = 2560;
+const MAX_HEIGHT = 2560;
+const JPEG_QUALITY = 0.85;
+const RESIZABLE_TYPES = new Set([
+    'image/jpeg',
+    'image/png',
+    'image/webp',
+    'image/bmp',
+    'image/tiff'
+]);
+async function resizeImage(file) {
+    if (!RESIZABLE_TYPES.has(file.type)) return file;
+    const bitmap = await createImageBitmap(file);
+    const { width, height } = bitmap;
+    if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
+        bitmap.close();
+        return file;
+    }
+    const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height);
+    const targetWidth = Math.round(width * ratio);
+    const targetHeight = Math.round(height * ratio);
+    const canvas = document.createElement('canvas');
+    canvas.width = targetWidth;
+    canvas.height = targetHeight;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(bitmap, 0, 0, targetWidth, targetHeight);
+    bitmap.close();
+    // Keep PNG for transparency, convert everything else to JPEG
+    const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
+    const quality = outputType === 'image/jpeg' ? JPEG_QUALITY : undefined;
+    const ext = outputType === 'image/png' ? 'png' : 'jpg';
+    const blob = await new Promise((resolve)=>{
+        canvas.toBlob((b)=>resolve(b), outputType, quality);
+    });
+    const baseName = file.name.replace(/\.[^.]+$/, '');
+    return new File([
+        blob
+    ], `${baseName}.${ext}`, {
+        type: outputType,
+        lastModified: Date.now()
+    });
+}
+export const UploadOptimizer = ()=>{
+    const { collectionSlug, docConfig, initialState } = useDocumentInfo();
+    const uploadConfig = docConfig && 'upload' in docConfig ? docConfig.upload : undefined;
+    const { value: fileValue, setValue: setFileValue } = useField({
+        path: 'file'
+    });
+    const processedFiles = useRef(new WeakSet());
+    const handleResize = useCallback(async (file)=>{
+        return resizeImage(file);
+    }, []);
+    useEffect(()=>{
+        if (!fileValue || !(fileValue instanceof File)) return;
+        if (processedFiles.current.has(fileValue)) return;
+        let cancelled = false;
+        handleResize(fileValue).then((resized)=>{
+            if (cancelled) return;
+            processedFiles.current.add(resized);
+            if (resized !== fileValue) {
+                setFileValue(resized);
+            }
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        fileValue,
+        handleResize,
+        setFileValue
+    ]);
+    if (!collectionSlug || !uploadConfig) return null;
+    return /*#__PURE__*/ _jsx(Upload, {
+        collectionSlug: collectionSlug,
+        initialState: initialState,
+        uploadConfig: uploadConfig
+    });
+};
+
+//# sourceMappingURL=UploadOptimizer.js.map

package/dist/components/UploadOptimizer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/UploadOptimizer.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useEffect, useRef } from 'react'\nimport { Upload, useDocumentInfo, useField } from '@payloadcms/ui'\n\nconst MAX_WIDTH = 2560\nconst MAX_HEIGHT = 2560\nconst JPEG_QUALITY = 0.85\n\nconst RESIZABLE_TYPES = new Set([\n  'image/jpeg',\n  'image/png',\n  'image/webp',\n  'image/bmp',\n  'image/tiff',\n])\n\nasync function resizeImage(file: File): Promise<File> {\n  if (!RESIZABLE_TYPES.has(file.type)) return file\n\n  const bitmap = await createImageBitmap(file)\n  const { width, height } = bitmap\n\n  if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {\n    bitmap.close()\n    return file\n  }\n\n  const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)\n  const targetWidth = Math.round(width * ratio)\n  const targetHeight = Math.round(height * ratio)\n\n  const canvas = document.createElement('canvas')\n  canvas.width = targetWidth\n  canvas.height = targetHeight\n  const ctx = canvas.getContext('2d')!\n  ctx.drawImage(bitmap, 0, 0, targetWidth, targetHeight)\n  bitmap.close()\n\n  // Keep PNG for transparency, convert everything else to JPEG\n  const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg'\n  const quality = outputType === 'image/jpeg' ? JPEG_QUALITY : undefined\n  const ext = outputType === 'image/png' ? 'png' : 'jpg'\n\n  const blob = await new Promise<Blob>((resolve) => {\n    canvas.toBlob((b) => resolve(b!), outputType, quality)\n  })\n\n  const baseName = file.name.replace(/\\.[^.]+$/, '')\n  return new File([blob], `${baseName}.${ext}`, {\n    type: outputType,\n    lastModified: Date.now(),\n  })\n}\n\nexport const UploadOptimizer: React.FC = () => {\n  const { collectionSlug, docConfig, initialState } = useDocumentInfo()\n  const uploadConfig = docConfig && 'upload' in docConfig ? docConfig.upload : undefined\n  const { value: fileValue, setValue: setFileValue } = useField<File | null>({ path: 'file' })\n  const processedFiles = useRef(new WeakSet<File>())\n\n  const handleResize = useCallback(async (file: File): Promise<File> => {\n    return resizeImage(file)\n  }, [])\n\n  useEffect(() => {\n    if (!fileValue || !(fileValue instanceof File)) return\n    if (processedFiles.current.has(fileValue)) return\n\n    let cancelled = false\n\n    handleResize(fileValue).then((resized) => {\n      if (cancelled) return\n      processedFiles.current.add(resized)\n      if (resized !== fileValue) {\n        setFileValue(resized)\n      }\n    })\n\n    return () => {\n      cancelled = true\n    }\n  }, [fileValue, handleResize, setFileValue])\n\n  if (!collectionSlug || !uploadConfig) return null\n\n  return (\n    <Upload\n      collectionSlug={collectionSlug}\n      initialState={initialState}\n      uploadConfig={uploadConfig}\n    />\n  )\n}\n"],"names":["React","useCallback","useEffect","useRef","Upload","useDocumentInfo","useField","MAX_WIDTH","MAX_HEIGHT","JPEG_QUALITY","RESIZABLE_TYPES","Set","resizeImage","file","has","type","bitmap","createImageBitmap","width","height","close","ratio","Math","min","targetWidth","round","targetHeight","canvas","document","createElement","ctx","getContext","drawImage","outputType","quality","undefined","ext","blob","Promise","resolve","toBlob","b","baseName","name","replace","File","lastModified","Date","now","UploadOptimizer","collectionSlug","docConfig","initialState","uploadConfig","upload","value","fileValue","setValue","setFileValue","path","processedFiles","WeakSet","handleResize","current","cancelled","then","resized","add"],"mappings":"AAAA;;AAEA,OAAOA,SAASC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAC7D,SAASC,MAAM,EAAEC,eAAe,EAAEC,QAAQ,QAAQ,iBAAgB;AAElE,MAAMC,YAAY;AAClB,MAAMC,aAAa;AACnB,MAAMC,eAAe;AAErB,MAAMC,kBAAkB,IAAIC,IAAI;IAC9B;IACA;IACA;IACA;IACA;CACD;AAED,eAAeC,YAAYC,IAAU;IACnC,IAAI,CAACH,gBAAgBI,GAAG,CAACD,KAAKE,IAAI,GAAG,OAAOF;IAE5C,MAAMG,SAAS,MAAMC,kBAAkBJ;IACvC,MAAM,EAAEK,KAAK,EAAEC,MAAM,EAAE,GAAGH;IAE1B,IAAIE,SAASX,aAAaY,UAAUX,YAAY;QAC9CQ,OAAOI,KAAK;QACZ,OAAOP;IACT;IAEA,MAAMQ,QAAQC,KAAKC,GAAG,CAAChB,YAAYW,OAAOV,aAAaW;IACvD,MAAMK,cAAcF,KAAKG,KAAK,CAACP,QAAQG;IACvC,MAAMK,eAAeJ,KAAKG,KAAK,CAACN,SAASE;IAEzC,MAAMM,SAASC,SAASC,aAAa,CAAC;IACtCF,OAAOT,KAAK,GAAGM;IACfG,OAAOR,MAAM,GAAGO;IAChB,MAAMI,MAAMH,OAAOI,UAAU,CAAC;IAC9BD,IAAIE,SAAS,CAAChB,QAAQ,GAAG,GAAGQ,aAAaE;IACzCV,OAAOI,KAAK;IAEZ,6DAA6D;IAC7D,MAAMa,aAAapB,KAAKE,IAAI,KAAK,cAAc,cAAc;IAC7D,MAAMmB,UAAUD,eAAe,eAAexB,eAAe0B;IAC7D,MAAMC,MAAMH,eAAe,cAAc,QAAQ;IAEjD,MAAMI,OAAO,MAAM,IAAIC,QAAc,CAACC;QACpCZ,OAAOa,MAAM,CAAC,CAACC,IAAMF,QAAQE,IAAKR,YAAYC;IAChD;IAEA,MAAMQ,WAAW7B,KAAK8B,IAAI,CAACC,OAAO,CAAC,YAAY;IAC/C,OAAO,IAAIC,KAAK;QAACR;KAAK,EAAE,GAAGK,SAAS,CAAC,EAAEN,KAAK,EAAE;QAC5CrB,MAAMkB;QACNa,cAAcC,KAAKC,GAAG;IACxB;AACF;AAEA,OAAO,MAAMC,kBAA4B;IACvC,MAAM,EAAEC,cAAc,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAG/C;IACpD,MAAMgD,eAAeF,aAAa,YAAYA,YAAYA,UAAUG,MAAM,GAAGnB;IAC7E,MAAM,EAAEoB,OAAOC,SAAS,EAAEC,UAAUC,YAAY,EAAE,GAAGpD,SAAsB;QAAEqD,MAAM;IAAO;IAC1F,MAAMC,iBAAiBzD,OAAO,IAAI0D;IAElC,MAAMC,eAAe7D,YAAY,OAAOY;QACtC,OAAOD,YAAYC;IACrB,GAAG,EAAE;IAELX,UAAU;QACR,IAAI,CAACsD,aAAa,CAAEA,CAAAA,qBAAqBX,IAAG,GAAI;QAChD,IAAIe,eAAeG,OAAO,CAACjD,GAAG,CAAC0C,YAAY;QAE3C,IAAIQ,YAAY;QAEhBF,aAAaN,WAAWS,IAAI,CAAC,CAACC;YAC5B,IAAIF,WAAW;YACfJ,eAAeG,OAAO,CAACI,GAAG,CAACD;YAC3B,IAAIA,YAAYV,WAAW;gBACzBE,aAAaQ;YACf;QACF;QAEA,OAAO;YACLF,YAAY;QACd;IACF,GAAG;QAACR;QAAWM;QAAcJ;KAAa;IAE1C,IAAI,CAACR,kBAAkB,CAACG,cAAc,OAAO;IAE7C,qBACE,KAACjD;QACC8C,gBAAgBA;QAChBE,cAAcA;QACdC,cAAcA;;AAGpB,EAAC"}

package/dist/defaults.js

@@ -1,4 +1,5 @@
 export const resolveConfig = (config)=>({
+        clientOptimization: config.clientOptimization ?? false,
         collections: config.collections,
         disabled: config.disabled ?? false,
         formats: config.formats ?? [

package/dist/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'\n\nexport const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({\n  collections: config.collections,\n  disabled: config.disabled ?? false,\n  formats: config.formats ?? [\n    { format: 'webp', quality: 80 },\n  ],\n  generateThumbHash: config.generateThumbHash ?? true,\n  maxDimensions: config.maxDimensions ?? { width: 2560, height: 2560 },\n  replaceOriginal: config.replaceOriginal ?? true,\n  stripMetadata: config.stripMetadata ?? true,\n})\n\nexport const resolveCollectionConfig = (\n  resolvedConfig: ResolvedImageOptimizerConfig,\n  collectionSlug: string,\n): ResolvedCollectionOptimizerConfig => {\n  const collectionValue = resolvedConfig.collections[collectionSlug as CollectionSlug]\n\n  if (!collectionValue || collectionValue === true) {\n    return {\n      formats: resolvedConfig.formats,\n      maxDimensions: resolvedConfig.maxDimensions,\n      replaceOriginal: resolvedConfig.replaceOriginal,\n    }\n  }\n\n  return {\n    formats: collectionValue.formats ?? resolvedConfig.formats,\n    maxDimensions: collectionValue.maxDimensions ?? resolvedConfig.maxDimensions,\n    replaceOriginal: collectionValue.replaceOriginal ?? resolvedConfig.replaceOriginal,\n  }\n}\n"],"names":["resolveConfig","config","collections","disabled","formats","format","quality","generateThumbHash","maxDimensions","width","height","replaceOriginal","stripMetadata","resolveCollectionConfig","resolvedConfig","collectionSlug","collectionValue"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,CAACC,SAAgE,CAAA;QAC5FC,aAAaD,OAAOC,WAAW;QAC/BC,UAAUF,OAAOE,QAAQ,IAAI;QAC7BC,SAASH,OAAOG,OAAO,IAAI;YACzB;gBAAEC,QAAQ;gBAAQC,SAAS;YAAG;SAC/B;QACDC,mBAAmBN,OAAOM,iBAAiB,IAAI;QAC/CC,eAAeP,OAAOO,aAAa,IAAI;YAAEC,OAAO;YAAMC,QAAQ;QAAK;QACnEC,iBAAiBV,OAAOU,eAAe,IAAI;QAC3CC,eAAeX,OAAOW,aAAa,IAAI;IACzC,CAAA,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CACrCC,gBACAC;IAEA,MAAMC,kBAAkBF,eAAeZ,WAAW,CAACa,eAAiC;IAEpF,IAAI,CAACC,mBAAmBA,oBAAoB,MAAM;QAChD,OAAO;YACLZ,SAASU,eAAeV,OAAO;YAC/BI,eAAeM,eAAeN,aAAa;YAC3CG,iBAAiBG,eAAeH,eAAe;QACjD;IACF;IAEA,OAAO;QACLP,SAASY,gBAAgBZ,OAAO,IAAIU,eAAeV,OAAO;QAC1DI,eAAeQ,gBAAgBR,aAAa,IAAIM,eAAeN,aAAa;QAC5EG,iBAAiBK,gBAAgBL,eAAe,IAAIG,eAAeH,eAAe;IACpF;AACF,EAAC"}
+{"version":3,"sources":["../src/defaults.ts"],"sourcesContent":["import type { CollectionSlug } from 'payload'\n\nimport type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'\n\nexport const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({\n  clientOptimization: config.clientOptimization ?? false,\n  collections: config.collections,\n  disabled: config.disabled ?? false,\n  formats: config.formats ?? [\n    { format: 'webp', quality: 80 },\n  ],\n  generateThumbHash: config.generateThumbHash ?? true,\n  maxDimensions: config.maxDimensions ?? { width: 2560, height: 2560 },\n  replaceOriginal: config.replaceOriginal ?? true,\n  stripMetadata: config.stripMetadata ?? true,\n})\n\nexport const resolveCollectionConfig = (\n  resolvedConfig: ResolvedImageOptimizerConfig,\n  collectionSlug: string,\n): ResolvedCollectionOptimizerConfig => {\n  const collectionValue = resolvedConfig.collections[collectionSlug as CollectionSlug]\n\n  if (!collectionValue || collectionValue === true) {\n    return {\n      formats: resolvedConfig.formats,\n      maxDimensions: resolvedConfig.maxDimensions,\n      replaceOriginal: resolvedConfig.replaceOriginal,\n    }\n  }\n\n  return {\n    formats: collectionValue.formats ?? resolvedConfig.formats,\n    maxDimensions: collectionValue.maxDimensions ?? resolvedConfig.maxDimensions,\n    replaceOriginal: collectionValue.replaceOriginal ?? resolvedConfig.replaceOriginal,\n  }\n}\n"],"names":["resolveConfig","config","clientOptimization","collections","disabled","formats","format","quality","generateThumbHash","maxDimensions","width","height","replaceOriginal","stripMetadata","resolveCollectionConfig","resolvedConfig","collectionSlug","collectionValue"],"mappings":"AAIA,OAAO,MAAMA,gBAAgB,CAACC,SAAgE,CAAA;QAC5FC,oBAAoBD,OAAOC,kBAAkB,IAAI;QACjDC,aAAaF,OAAOE,WAAW;QAC/BC,UAAUH,OAAOG,QAAQ,IAAI;QAC7BC,SAASJ,OAAOI,OAAO,IAAI;YACzB;gBAAEC,QAAQ;gBAAQC,SAAS;YAAG;SAC/B;QACDC,mBAAmBP,OAAOO,iBAAiB,IAAI;QAC/CC,eAAeR,OAAOQ,aAAa,IAAI;YAAEC,OAAO;YAAMC,QAAQ;QAAK;QACnEC,iBAAiBX,OAAOW,eAAe,IAAI;QAC3CC,eAAeZ,OAAOY,aAAa,IAAI;IACzC,CAAA,EAAE;AAEF,OAAO,MAAMC,0BAA0B,CACrCC,gBACAC;IAEA,MAAMC,kBAAkBF,eAAeZ,WAAW,CAACa,eAAiC;IAEpF,IAAI,CAACC,mBAAmBA,oBAAoB,MAAM;QAChD,OAAO;YACLZ,SAASU,eAAeV,OAAO;YAC/BI,eAAeM,eAAeN,aAAa;YAC3CG,iBAAiBG,eAAeH,eAAe;QACjD;IACF;IAEA,OAAO;QACLP,SAASY,gBAAgBZ,OAAO,IAAIU,eAAeV,OAAO;QAC1DI,eAAeQ,gBAAgBR,aAAa,IAAIM,eAAeN,aAAa;QAC5EG,iBAAiBK,gBAAgBL,eAAe,IAAIG,eAAeH,eAAe;IACpF;AACF,EAAC"}

package/dist/exports/client.d.ts

@@ -6,3 +6,4 @@ export type { FadeImageProps } from '../components/FadeImage.js';
 export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
 export type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
 export { RegenerationButton } from '../components/RegenerationButton.js';
+export { UploadOptimizer } from '../components/UploadOptimizer.js';

package/dist/exports/client.js

@@ -3,5 +3,6 @@ export { ImageBox } from '../components/ImageBox.js';
 export { FadeImage } from '../components/FadeImage.js';
 export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js';
 export { RegenerationButton } from '../components/RegenerationButton.js';
+export { UploadOptimizer } from '../components/UploadOptimizer.js';
 
 //# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { OptimizationStatus } from '../components/OptimizationStatus.js'\nexport { ImageBox } from '../components/ImageBox.js'\nexport type { ImageBoxProps } from '../components/ImageBox.js'\nexport { FadeImage } from '../components/FadeImage.js'\nexport type { FadeImageProps } from '../components/FadeImage.js'\nexport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport { RegenerationButton } from '../components/RegenerationButton.js'\n"],"names":["OptimizationStatus","ImageBox","FadeImage","getImageOptimizerProps","RegenerationButton"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,QAAQ,QAAQ,4BAA2B;AAEpD,SAASC,SAAS,QAAQ,6BAA4B;AAEtD,SAASC,sBAAsB,QAAQ,yCAAwC;AAE/E,SAASC,kBAAkB,QAAQ,sCAAqC"}
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { OptimizationStatus } from '../components/OptimizationStatus.js'\nexport { ImageBox } from '../components/ImageBox.js'\nexport type { ImageBoxProps } from '../components/ImageBox.js'\nexport { FadeImage } from '../components/FadeImage.js'\nexport type { FadeImageProps } from '../components/FadeImage.js'\nexport { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'\nexport { RegenerationButton } from '../components/RegenerationButton.js'\nexport { UploadOptimizer } from '../components/UploadOptimizer.js'\n"],"names":["OptimizationStatus","ImageBox","FadeImage","getImageOptimizerProps","RegenerationButton","UploadOptimizer"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,QAAQ,QAAQ,4BAA2B;AAEpD,SAASC,SAAS,QAAQ,6BAA4B;AAEtD,SAASC,sBAAsB,QAAQ,yCAAwC;AAE/E,SAASC,kBAAkB,QAAQ,sCAAqC;AACxE,SAASC,eAAe,QAAQ,mCAAkC"}

package/dist/index.d.ts

@@ -3,4 +3,11 @@ import type { ImageOptimizerConfig } from './types.js';
 export type { ImageOptimizerConfig, ImageFormat, FormatQuality, CollectionOptimizerConfig, ImageOptimizerData, MediaResource, FieldsOverride } from './types.js';
 export { defaultImageOptimizerFields } from './fields/imageOptimizerField.js';
 export { encodeImageToThumbHash, decodeThumbHashToDataURL } from './utilities/thumbhash.js';
+/**
+ * Recommended maxDuration for the Payload API route on Vercel.
+ * Re-export this in your route file:
+ *
+ *   export { maxDuration } from '@inoo-ch/payload-image-optimizer'
+ */
+export declare const maxDuration = 60;
 export declare const imageOptimizer: (pluginOptions: ImageOptimizerConfig) => (config: Config) => Config;

package/dist/index.js

@@ -9,6 +9,12 @@ import { createRegenerateDocumentHandler } from './tasks/regenerateDocument.js';
 import { createRegenerateHandler, createRegenerateStatusHandler } from './endpoints/regenerate.js';
 export { defaultImageOptimizerFields } from './fields/imageOptimizerField.js';
 export { encodeImageToThumbHash, decodeThumbHashToDataURL } from './utilities/thumbhash.js';
+/**
+ * Recommended maxDuration for the Payload API route on Vercel.
+ * Re-export this in your route file:
+ *
+ *   export { maxDuration } from '@inoo-ch/payload-image-optimizer'
+ */ export const maxDuration = 60;
 export const imageOptimizer = (pluginOptions)=>(config)=>{
         const resolvedConfig = resolveConfig(pluginOptions);
         const targetSlugs = Object.keys(resolvedConfig.collections);
@@ -46,6 +52,12 @@ export const imageOptimizer = (pluginOptions)=>(config)=>{
                     ...collection.admin,
                     components: {
                         ...collection.admin?.components,
+                        ...resolvedConfig.clientOptimization && !collection.admin?.components?.edit?.Upload ? {
+                            edit: {
+                                ...collection.admin?.components?.edit,
+                                Upload: '@inoo-ch/payload-image-optimizer/client#UploadOptimizer'
+                            }
+                        } : {},
                         beforeListTable: [
                             ...collection.admin?.components?.beforeListTable || [],
                             '@inoo-ch/payload-image-optimizer/client#RegenerationButton'

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Config } from 'payload'\nimport { deepMergeSimple } from 'payload/shared'\n\nimport type { ImageOptimizerConfig } from './types.js'\nimport { resolveConfig } from './defaults.js'\nimport { translations } from './translations/index.js'\nimport { getImageOptimizerField } from './fields/imageOptimizerField.js'\nimport { createBeforeChangeHook } from './hooks/beforeChange.js'\nimport { createAfterChangeHook } from './hooks/afterChange.js'\nimport { createConvertFormatsHandler } from './tasks/convertFormats.js'\nimport { createRegenerateDocumentHandler } from './tasks/regenerateDocument.js'\nimport { createRegenerateHandler, createRegenerateStatusHandler } from './endpoints/regenerate.js'\n\nexport type { ImageOptimizerConfig, ImageFormat, FormatQuality, CollectionOptimizerConfig, ImageOptimizerData, MediaResource, FieldsOverride } from './types.js'\nexport { defaultImageOptimizerFields } from './fields/imageOptimizerField.js'\n\nexport { encodeImageToThumbHash, decodeThumbHashToDataURL } from './utilities/thumbhash.js'\n\nexport const imageOptimizer =\n  (pluginOptions: ImageOptimizerConfig) =>\n  (config: Config): Config => {\n    const resolvedConfig = resolveConfig(pluginOptions)\n    const targetSlugs = Object.keys(resolvedConfig.collections)\n\n    // Inject fields (and hooks when enabled) into targeted upload collections\n    const collections = (config.collections || []).map((collection) => {\n      if (!targetSlugs.includes(collection.slug)) {\n        return collection\n      }\n\n      // Always inject fields for schema consistency (even when disabled)\n      const fields = [...collection.fields, getImageOptimizerField(pluginOptions.fieldsOverride)]\n\n      if (resolvedConfig.disabled) {\n        return { ...collection, fields }\n      }\n\n      return {\n        ...collection,\n        fields,\n        hooks: {\n          ...collection.hooks,\n          beforeChange: [\n            ...(collection.hooks?.beforeChange || []),\n            createBeforeChangeHook(resolvedConfig, collection.slug),\n          ],\n          afterChange: [\n            ...(collection.hooks?.afterChange || []),\n            createAfterChangeHook(resolvedConfig, collection.slug),\n          ],\n        },\n        admin: {\n          ...collection.admin,\n          components: {\n            ...collection.admin?.components,\n            beforeListTable: [\n              ...(collection.admin?.components?.beforeListTable || []),\n              '@inoo-ch/payload-image-optimizer/client#RegenerationButton',\n            ],\n          },\n        },\n      }\n    })\n\n    const i18n = {\n      ...config.i18n,\n      translations: deepMergeSimple(translations, config.i18n?.translations ?? {}),\n    }\n\n    // If disabled, return with fields injected but no tasks/endpoints\n    if (resolvedConfig.disabled) {\n      return { ...config, collections, i18n }\n    }\n\n    return {\n      ...config,\n      collections,\n      i18n,\n      jobs: {\n        ...config.jobs,\n        tasks: [\n          ...(config.jobs?.tasks || []),\n          {\n            slug: 'imageOptimizer_convertFormats',\n            inputSchema: [\n              { name: 'collectionSlug', type: 'text', required: true },\n              { name: 'docId', type: 'text', required: true },\n            ],\n            outputSchema: [\n              { name: 'variantsGenerated', type: 'number' },\n            ],\n            retries: 2,\n            handler: createConvertFormatsHandler(resolvedConfig),\n          } as any,\n          {\n            slug: 'imageOptimizer_regenerateDocument',\n            inputSchema: [\n              { name: 'collectionSlug', type: 'text', required: true },\n              { name: 'docId', type: 'text', required: true },\n            ],\n            outputSchema: [\n              { name: 'status', type: 'text' },\n              { name: 'reason', type: 'text' },\n            ],\n            retries: 2,\n            handler: createRegenerateDocumentHandler(resolvedConfig),\n          } as any,\n        ],\n      },\n      endpoints: [\n        ...(config.endpoints ?? []),\n        {\n          path: '/image-optimizer/regenerate',\n          method: 'post',\n          handler: createRegenerateHandler(resolvedConfig),\n        },\n        {\n          path: '/image-optimizer/regenerate',\n          method: 'get',\n          handler: createRegenerateStatusHandler(resolvedConfig),\n        },\n      ],\n    }\n  }\n"],"names":["deepMergeSimple","resolveConfig","translations","getImageOptimizerField","createBeforeChangeHook","createAfterChangeHook","createConvertFormatsHandler","createRegenerateDocumentHandler","createRegenerateHandler","createRegenerateStatusHandler","defaultImageOptimizerFields","encodeImageToThumbHash","decodeThumbHashToDataURL","imageOptimizer","pluginOptions","config","resolvedConfig","targetSlugs","Object","keys","collections","map","collection","includes","slug","fields","fieldsOverride","disabled","hooks","beforeChange","afterChange","admin","components","beforeListTable","i18n","jobs","tasks","inputSchema","name","type","required","outputSchema","retries","handler","endpoints","path","method"],"mappings":"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"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { Config } from 'payload'\nimport { deepMergeSimple } from 'payload/shared'\n\nimport type { ImageOptimizerConfig } from './types.js'\nimport { resolveConfig } from './defaults.js'\nimport { translations } from './translations/index.js'\nimport { getImageOptimizerField } from './fields/imageOptimizerField.js'\nimport { createBeforeChangeHook } from './hooks/beforeChange.js'\nimport { createAfterChangeHook } from './hooks/afterChange.js'\nimport { createConvertFormatsHandler } from './tasks/convertFormats.js'\nimport { createRegenerateDocumentHandler } from './tasks/regenerateDocument.js'\nimport { createRegenerateHandler, createRegenerateStatusHandler } from './endpoints/regenerate.js'\n\nexport type { ImageOptimizerConfig, ImageFormat, FormatQuality, CollectionOptimizerConfig, ImageOptimizerData, MediaResource, FieldsOverride } from './types.js'\nexport { defaultImageOptimizerFields } from './fields/imageOptimizerField.js'\n\nexport { encodeImageToThumbHash, decodeThumbHashToDataURL } from './utilities/thumbhash.js'\n\n/**\n * Recommended maxDuration for the Payload API route on Vercel.\n * Re-export this in your route file:\n *\n *   export { maxDuration } from '@inoo-ch/payload-image-optimizer'\n */\nexport const maxDuration = 60\n\nexport const imageOptimizer =\n  (pluginOptions: ImageOptimizerConfig) =>\n  (config: Config): Config => {\n    const resolvedConfig = resolveConfig(pluginOptions)\n    const targetSlugs = Object.keys(resolvedConfig.collections)\n\n    // Inject fields (and hooks when enabled) into targeted upload collections\n    const collections = (config.collections || []).map((collection) => {\n      if (!targetSlugs.includes(collection.slug)) {\n        return collection\n      }\n\n      // Always inject fields for schema consistency (even when disabled)\n      const fields = [...collection.fields, getImageOptimizerField(pluginOptions.fieldsOverride)]\n\n      if (resolvedConfig.disabled) {\n        return { ...collection, fields }\n      }\n\n      return {\n        ...collection,\n        fields,\n        hooks: {\n          ...collection.hooks,\n          beforeChange: [\n            ...(collection.hooks?.beforeChange || []),\n            createBeforeChangeHook(resolvedConfig, collection.slug),\n          ],\n          afterChange: [\n            ...(collection.hooks?.afterChange || []),\n            createAfterChangeHook(resolvedConfig, collection.slug),\n          ],\n        },\n        admin: {\n          ...collection.admin,\n          components: {\n            ...collection.admin?.components,\n            ...(resolvedConfig.clientOptimization && !collection.admin?.components?.edit?.Upload\n              ? {\n                  edit: {\n                    ...collection.admin?.components?.edit,\n                    Upload: '@inoo-ch/payload-image-optimizer/client#UploadOptimizer',\n                  },\n                }\n              : {}),\n            beforeListTable: [\n              ...(collection.admin?.components?.beforeListTable || []),\n              '@inoo-ch/payload-image-optimizer/client#RegenerationButton',\n            ],\n          },\n        },\n      }\n    })\n\n    const i18n = {\n      ...config.i18n,\n      translations: deepMergeSimple(translations, config.i18n?.translations ?? {}),\n    }\n\n    // If disabled, return with fields injected but no tasks/endpoints\n    if (resolvedConfig.disabled) {\n      return { ...config, collections, i18n }\n    }\n\n    return {\n      ...config,\n      collections,\n      i18n,\n      jobs: {\n        ...config.jobs,\n        tasks: [\n          ...(config.jobs?.tasks || []),\n          {\n            slug: 'imageOptimizer_convertFormats',\n            inputSchema: [\n              { name: 'collectionSlug', type: 'text', required: true },\n              { name: 'docId', type: 'text', required: true },\n            ],\n            outputSchema: [\n              { name: 'variantsGenerated', type: 'number' },\n            ],\n            retries: 2,\n            handler: createConvertFormatsHandler(resolvedConfig),\n          } as any,\n          {\n            slug: 'imageOptimizer_regenerateDocument',\n            inputSchema: [\n              { name: 'collectionSlug', type: 'text', required: true },\n              { name: 'docId', type: 'text', required: true },\n            ],\n            outputSchema: [\n              { name: 'status', type: 'text' },\n              { name: 'reason', type: 'text' },\n            ],\n            retries: 2,\n            handler: createRegenerateDocumentHandler(resolvedConfig),\n          } as any,\n        ],\n      },\n      endpoints: [\n        ...(config.endpoints ?? []),\n        {\n          path: '/image-optimizer/regenerate',\n          method: 'post',\n          handler: createRegenerateHandler(resolvedConfig),\n        },\n        {\n          path: '/image-optimizer/regenerate',\n          method: 'get',\n          handler: createRegenerateStatusHandler(resolvedConfig),\n        },\n      ],\n    }\n  }\n"],"names":["deepMergeSimple","resolveConfig","translations","getImageOptimizerField","createBeforeChangeHook","createAfterChangeHook","createConvertFormatsHandler","createRegenerateDocumentHandler","createRegenerateHandler","createRegenerateStatusHandler","defaultImageOptimizerFields","encodeImageToThumbHash","decodeThumbHashToDataURL","maxDuration","imageOptimizer","pluginOptions","config","resolvedConfig","targetSlugs","Object","keys","collections","map","collection","includes","slug","fields","fieldsOverride","disabled","hooks","beforeChange","afterChange","admin","components","clientOptimization","edit","Upload","beforeListTable","i18n","jobs","tasks","inputSchema","name","type","required","outputSchema","retries","handler","endpoints","path","method"],"mappings":"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"}

package/dist/types.d.ts

@@ -16,6 +16,7 @@ export type FieldsOverride = (args: {
     defaultFields: Field[];
 }) => Field[];
 export type ImageOptimizerConfig = {
+    clientOptimization?: boolean;
     collections: Partial<Record<CollectionSlug, true | CollectionOptimizerConfig>>;
     disabled?: boolean;
     fieldsOverride?: FieldsOverride;
@@ -37,6 +38,7 @@ export type ResolvedCollectionOptimizerConfig = {
     replaceOriginal: boolean;
 };
 export type ResolvedImageOptimizerConfig = Required<Pick<ImageOptimizerConfig, 'formats' | 'generateThumbHash' | 'maxDimensions' | 'stripMetadata'>> & {
+    clientOptimization: boolean;
     collections: ImageOptimizerConfig['collections'];
     disabled: boolean;
     replaceOriginal: boolean;

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CollectionSlug, Field } from 'payload'\n\nexport type ImageFormat = 'webp' | 'avif'\n\nexport type FormatQuality = {\n  format: ImageFormat\n  quality: number // 1-100\n}\n\nexport type CollectionOptimizerConfig = {\n  formats?: FormatQuality[]\n  maxDimensions?: { width: number; height: number }\n  replaceOriginal?: boolean\n}\n\nexport type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]\n\nexport type ImageOptimizerConfig = {\n  collections: Partial<Record<CollectionSlug, true | CollectionOptimizerConfig>>\n  disabled?: boolean\n  fieldsOverride?: FieldsOverride\n  formats?: FormatQuality[]\n  generateThumbHash?: boolean\n  maxDimensions?: { width: number; height: number }\n  replaceOriginal?: boolean\n  stripMetadata?: boolean\n}\n\nexport type ResolvedCollectionOptimizerConfig = {\n  formats: FormatQuality[]\n  maxDimensions: { width: number; height: number }\n  replaceOriginal: boolean\n}\n\nexport type ResolvedImageOptimizerConfig = Required<\n  Pick<ImageOptimizerConfig, 'formats' | 'generateThumbHash' | 'maxDimensions' | 'stripMetadata'>\n> & {\n  collections: ImageOptimizerConfig['collections']\n  disabled: boolean\n  replaceOriginal: boolean\n}\n\nexport type ImageOptimizerData = {\n  thumbHash?: string | null\n}\n\nexport type MediaResource = {\n  url?: string | null\n  alt?: string | null\n  width?: number | null\n  height?: number | null\n  filename?: string | null\n  focalX?: number | null\n  focalY?: number | null\n  imageOptimizer?: ImageOptimizerData | null\n  updatedAt?: string\n}\n"],"names":[],"mappings":"AA8CA,WAUC"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CollectionSlug, Field } from 'payload'\n\nexport type ImageFormat = 'webp' | 'avif'\n\nexport type FormatQuality = {\n  format: ImageFormat\n  quality: number // 1-100\n}\n\nexport type CollectionOptimizerConfig = {\n  formats?: FormatQuality[]\n  maxDimensions?: { width: number; height: number }\n  replaceOriginal?: boolean\n}\n\nexport type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]\n\nexport type ImageOptimizerConfig = {\n  clientOptimization?: boolean\n  collections: Partial<Record<CollectionSlug, true | CollectionOptimizerConfig>>\n  disabled?: boolean\n  fieldsOverride?: FieldsOverride\n  formats?: FormatQuality[]\n  generateThumbHash?: boolean\n  maxDimensions?: { width: number; height: number }\n  replaceOriginal?: boolean\n  stripMetadata?: boolean\n}\n\nexport type ResolvedCollectionOptimizerConfig = {\n  formats: FormatQuality[]\n  maxDimensions: { width: number; height: number }\n  replaceOriginal: boolean\n}\n\nexport type ResolvedImageOptimizerConfig = Required<\n  Pick<ImageOptimizerConfig, 'formats' | 'generateThumbHash' | 'maxDimensions' | 'stripMetadata'>\n> & {\n  clientOptimization: boolean\n  collections: ImageOptimizerConfig['collections']\n  disabled: boolean\n  replaceOriginal: boolean\n}\n\nexport type ImageOptimizerData = {\n  thumbHash?: string | null\n}\n\nexport type MediaResource = {\n  url?: string | null\n  alt?: string | null\n  width?: number | null\n  height?: number | null\n  filename?: string | null\n  focalX?: number | null\n  focalY?: number | null\n  imageOptimizer?: ImageOptimizerData | null\n  updatedAt?: string\n}\n"],"names":[],"mappings":"AAgDA,WAUC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inoo-ch/payload-image-optimizer",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "description": "Payload CMS plugin for automatic image optimization — WebP/AVIF conversion, resize, EXIF strip, ThumbHash placeholders, and bulk regeneration",
   "license": "MIT",
   "keywords": [

package/src/components/UploadOptimizer.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef } from 'react'
+import { Upload, useDocumentInfo, useField } from '@payloadcms/ui'
+
+const MAX_WIDTH = 2560
+const MAX_HEIGHT = 2560
+const JPEG_QUALITY = 0.85
+
+const RESIZABLE_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/bmp',
+  'image/tiff',
+])
+
+async function resizeImage(file: File): Promise<File> {
+  if (!RESIZABLE_TYPES.has(file.type)) return file
+
+  const bitmap = await createImageBitmap(file)
+  const { width, height } = bitmap
+
+  if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
+    bitmap.close()
+    return file
+  }
+
+  const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
+  const targetWidth = Math.round(width * ratio)
+  const targetHeight = Math.round(height * ratio)
+
+  const canvas = document.createElement('canvas')
+  canvas.width = targetWidth
+  canvas.height = targetHeight
+  const ctx = canvas.getContext('2d')!
+  ctx.drawImage(bitmap, 0, 0, targetWidth, targetHeight)
+  bitmap.close()
+
+  // Keep PNG for transparency, convert everything else to JPEG
+  const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg'
+  const quality = outputType === 'image/jpeg' ? JPEG_QUALITY : undefined
+  const ext = outputType === 'image/png' ? 'png' : 'jpg'
+
+  const blob = await new Promise<Blob>((resolve) => {
+    canvas.toBlob((b) => resolve(b!), outputType, quality)
+  })
+
+  const baseName = file.name.replace(/\.[^.]+$/, '')
+  return new File([blob], `${baseName}.${ext}`, {
+    type: outputType,
+    lastModified: Date.now(),
+  })
+}
+
+export const UploadOptimizer: React.FC = () => {
+  const { collectionSlug, docConfig, initialState } = useDocumentInfo()
+  const uploadConfig = docConfig && 'upload' in docConfig ? docConfig.upload : undefined
+  const { value: fileValue, setValue: setFileValue } = useField<File | null>({ path: 'file' })
+  const processedFiles = useRef(new WeakSet<File>())
+
+  const handleResize = useCallback(async (file: File): Promise<File> => {
+    return resizeImage(file)
+  }, [])
+
+  useEffect(() => {
+    if (!fileValue || !(fileValue instanceof File)) return
+    if (processedFiles.current.has(fileValue)) return
+
+    let cancelled = false
+
+    handleResize(fileValue).then((resized) => {
+      if (cancelled) return
+      processedFiles.current.add(resized)
+      if (resized !== fileValue) {
+        setFileValue(resized)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [fileValue, handleResize, setFileValue])
+
+  if (!collectionSlug || !uploadConfig) return null
+
+  return (
+    <Upload
+      collectionSlug={collectionSlug}
+      initialState={initialState}
+      uploadConfig={uploadConfig}
+    />
+  )
+}

package/src/defaults.ts

@@ -3,6 +3,7 @@ import type { CollectionSlug } from 'payload'
 import type { ImageOptimizerConfig, ResolvedCollectionOptimizerConfig, ResolvedImageOptimizerConfig } from './types.js'
 
 export const resolveConfig = (config: ImageOptimizerConfig): ResolvedImageOptimizerConfig => ({
+  clientOptimization: config.clientOptimization ?? false,
   collections: config.collections,
   disabled: config.disabled ?? false,
   formats: config.formats ?? [

package/src/exports/client.ts

@@ -6,3 +6,4 @@ export type { FadeImageProps } from '../components/FadeImage.js'
 export { getImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'
 export type { ImageOptimizerProps } from '../utilities/getImageOptimizerProps.js'
 export { RegenerationButton } from '../components/RegenerationButton.js'
+export { UploadOptimizer } from '../components/UploadOptimizer.js'

package/src/index.ts

@@ -16,6 +16,14 @@ export { defaultImageOptimizerFields } from './fields/imageOptimizerField.js'
 
 export { encodeImageToThumbHash, decodeThumbHashToDataURL } from './utilities/thumbhash.js'
 
+/**
+ * Recommended maxDuration for the Payload API route on Vercel.
+ * Re-export this in your route file:
+ *
+ *   export { maxDuration } from '@inoo-ch/payload-image-optimizer'
+ */
+export const maxDuration = 60
+
 export const imageOptimizer =
   (pluginOptions: ImageOptimizerConfig) =>
   (config: Config): Config => {
@@ -53,6 +61,14 @@ export const imageOptimizer =
           ...collection.admin,
           components: {
             ...collection.admin?.components,
+            ...(resolvedConfig.clientOptimization && !collection.admin?.components?.edit?.Upload
+              ? {
+                  edit: {
+                    ...collection.admin?.components?.edit,
+                    Upload: '@inoo-ch/payload-image-optimizer/client#UploadOptimizer',
+                  },
+                }
+              : {}),
             beforeListTable: [
               ...(collection.admin?.components?.beforeListTable || []),
               '@inoo-ch/payload-image-optimizer/client#RegenerationButton',

package/src/types.ts

@@ -16,6 +16,7 @@ export type CollectionOptimizerConfig = {
 export type FieldsOverride = (args: { defaultFields: Field[] }) => Field[]
 
 export type ImageOptimizerConfig = {
+  clientOptimization?: boolean
   collections: Partial<Record<CollectionSlug, true | CollectionOptimizerConfig>>
   disabled?: boolean
   fieldsOverride?: FieldsOverride
@@ -35,6 +36,7 @@ export type ResolvedCollectionOptimizerConfig = {
 export type ResolvedImageOptimizerConfig = Required<
   Pick<ImageOptimizerConfig, 'formats' | 'generateThumbHash' | 'maxDimensions' | 'stripMetadata'>
 > & {
+  clientOptimization: boolean
   collections: ImageOptimizerConfig['collections']
   disabled: boolean
   replaceOriginal: boolean