@inoo-ch/payload-image-optimizer 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inoo-ch/payload-image-optimizer",
-  "version": "1.2.0",
+  "version": "1.3.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/OptimizationStatus.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import { thumbHashToDataURL } from 'thumbhash'
-import { useAllFormFields, useDocumentInfo } from '@payloadcms/ui'
+import { useAllFormFields } from '@payloadcms/ui'
 
 const formatBytes = (bytes: number): string => {
   if (bytes === 0) return '0 B'
@@ -19,90 +19,15 @@ const statusColors: Record<string, string> = {
   error: '#ef4444',
 }
 
-const POLL_INTERVAL_MS = 2000
-
-type PolledData = {
-  status?: string
-  originalSize?: number
-  optimizedSize?: number
-  thumbHash?: string
-  error?: string
-  variants?: Array<{
-    format?: string
-    filename?: string
-    filesize?: number
-    width?: number
-    height?: number
-  }>
-}
-
 export const OptimizationStatus: React.FC<{ path?: string }> = (props) => {
   const [formState] = useAllFormFields()
-  const { collectionSlug, id } = useDocumentInfo()
   const basePath = props.path ?? 'imageOptimizer'
 
-  const formStatus = formState[`${basePath}.status`]?.value as string | undefined
-  const formOriginalSize = formState[`${basePath}.originalSize`]?.value as number | undefined
-  const formOptimizedSize = formState[`${basePath}.optimizedSize`]?.value as number | undefined
-  const formThumbHash = formState[`${basePath}.thumbHash`]?.value as string | undefined
-  const formError = formState[`${basePath}.error`]?.value as string | undefined
-
-  const [polledData, setPolledData] = React.useState<PolledData | null>(null)
-
-  // Reset polled data when a new upload changes the form status back to pending
-  React.useEffect(() => {
-    if (formStatus === 'pending') {
-      setPolledData(null)
-    }
-  }, [formStatus])
-
-  // Poll for status updates when status is non-terminal
-  React.useEffect(() => {
-    const currentStatus = polledData?.status ?? formStatus
-    if (!currentStatus || currentStatus === 'complete' || currentStatus === 'error') return
-    if (!collectionSlug || !id) return
-
-    const controller = new AbortController()
-
-    const poll = async () => {
-      try {
-        const res = await fetch(`/api/${collectionSlug}/${id}?depth=0`, {
-          signal: controller.signal,
-        })
-        if (!res.ok) return
-        const doc = await res.json()
-        const optimizer = doc.imageOptimizer
-        if (!optimizer) return
-
-        setPolledData({
-          status: optimizer.status,
-          originalSize: optimizer.originalSize,
-          optimizedSize: optimizer.optimizedSize,
-          thumbHash: optimizer.thumbHash,
-          error: optimizer.error,
-          variants: optimizer.variants,
-        })
-      } catch {
-        // Silently ignore fetch errors (abort, network issues)
-      }
-    }
-
-    const intervalId = setInterval(poll, POLL_INTERVAL_MS)
-    // Run immediately on mount
-    poll()
-
-    return () => {
-      controller.abort()
-      clearInterval(intervalId)
-    }
-  }, [polledData?.status, formStatus, collectionSlug, id])
-
-  // Use polled data when available, otherwise fall back to form state
-  const status = polledData?.status ?? formStatus
-  const originalSize = polledData?.originalSize ?? formOriginalSize
-  const optimizedSize = polledData?.optimizedSize ?? formOptimizedSize
-  const thumbHash = polledData?.thumbHash ?? formThumbHash
-  const error = polledData?.error ?? formError
+  const status = formState[`${basePath}.status`]?.value as string | undefined
+  const originalSize = formState[`${basePath}.originalSize`]?.value as number | undefined
+  const optimizedSize = formState[`${basePath}.optimizedSize`]?.value as number | undefined
+  const thumbHash = formState[`${basePath}.thumbHash`]?.value as string | undefined
+  const error = formState[`${basePath}.error`]?.value as string | undefined
 
   const thumbHashUrl = React.useMemo(() => {
     if (!thumbHash) return null
@@ -114,30 +39,26 @@ export const OptimizationStatus: React.FC<{ path?: string }> = (props) => {
     }
   }, [thumbHash])
 
-  // Read variants from polled data or form state
+  // Read variants array from form state
+  const variantsField = formState[`${basePath}.variants`]
+  const rowCount = (variantsField as any)?.rows?.length ?? 0
   const variants: Array<{
     format?: string
     filename?: string
     filesize?: number
     width?: number
     height?: number
-  }> = React.useMemo(() => {
-    if (polledData?.variants) return polledData.variants
-
-    const variantsField = formState[`${basePath}.variants`]
-    const rowCount = (variantsField as any)?.rows?.length ?? 0
-    const formVariants: typeof variants = []
-    for (let i = 0; i < rowCount; i++) {
-      formVariants.push({
-        format: formState[`${basePath}.variants.${i}.format`]?.value as string | undefined,
-        filename: formState[`${basePath}.variants.${i}.filename`]?.value as string | undefined,
-        filesize: formState[`${basePath}.variants.${i}.filesize`]?.value as number | undefined,
-        width: formState[`${basePath}.variants.${i}.width`]?.value as number | undefined,
-        height: formState[`${basePath}.variants.${i}.height`]?.value as number | undefined,
-      })
-    }
-    return formVariants
-  }, [polledData?.variants, formState, basePath])
+  }> = []
+
+  for (let i = 0; i < rowCount; i++) {
+    variants.push({
+      format: formState[`${basePath}.variants.${i}.format`]?.value as string | undefined,
+      filename: formState[`${basePath}.variants.${i}.filename`]?.value as string | undefined,
+      filesize: formState[`${basePath}.variants.${i}.filesize`]?.value as number | undefined,
+      width: formState[`${basePath}.variants.${i}.width`]?.value as number | undefined,
+      height: formState[`${basePath}.variants.${i}.height`]?.value as number | undefined,
+    })
+  }
 
   if (!status) {
     return (

package/src/hooks/afterChange.ts

@@ -5,6 +5,7 @@ import type { CollectionAfterChangeHook } from 'payload'
 import type { ResolvedImageOptimizerConfig } from '../types.js'
 import { resolveCollectionConfig } from '../defaults.js'
 import { resolveStaticDir } from '../utilities/resolveStaticDir.js'
+import { isCloudStorage } from '../utilities/storage.js'
 
 export const createAfterChangeHook = (
   resolvedConfig: ResolvedImageOptimizerConfig,
@@ -16,28 +17,33 @@ export const createAfterChangeHook = (
     if (!req.file || !req.file.data || !req.file.mimetype?.startsWith('image/')) return doc
 
     const collectionConfig = req.payload.collections[collectionSlug as keyof typeof req.payload.collections].config
-    const staticDir = resolveStaticDir(collectionConfig)
+    const cloudStorage = isCloudStorage(collectionConfig)
 
-    const perCollectionConfig = resolveCollectionConfig(resolvedConfig, collectionSlug)
-
-    // Overwrite the file on disk with the processed (stripped/resized/converted) buffer
-    // Payload 3.0 writes the original buffer to disk; we replace it here
-    const processedBuffer = context.imageOptimizer_processedBuffer as Buffer | undefined
-    if (processedBuffer && doc.filename && staticDir) {
-      const safeFilename = path.basename(doc.filename as string)
-      const filePath = path.join(staticDir, safeFilename)
-      await fs.writeFile(filePath, processedBuffer)
+    // When using local storage, overwrite the file on disk with the processed buffer.
+    // Payload's uploadFiles step writes the original buffer; we replace it here.
+    // When using cloud storage, skip — the cloud adapter's afterChange hook already
+    // uploads the correct buffer from req.file.data (set in our beforeChange hook).
+    if (!cloudStorage) {
+      const staticDir = resolveStaticDir(collectionConfig)
+      const processedBuffer = context.imageOptimizer_processedBuffer as Buffer | undefined
+      if (processedBuffer && doc.filename && staticDir) {
+        const safeFilename = path.basename(doc.filename as string)
+        const filePath = path.join(staticDir, safeFilename)
+        await fs.writeFile(filePath, processedBuffer)
 
-      // If replaceOriginal changed the filename, clean up the old file Payload wrote
-      const originalFilename = context.imageOptimizer_originalFilename as string | undefined
-      if (originalFilename && originalFilename !== safeFilename) {
-        const oldFilePath = path.join(staticDir, path.basename(originalFilename))
-        await fs.unlink(oldFilePath).catch(() => {
-          // Old file may not exist if Payload used the new filename
-        })
+        // If replaceOriginal changed the filename, clean up the old file Payload wrote
+        const originalFilename = context.imageOptimizer_originalFilename as string | undefined
+        if (originalFilename && originalFilename !== safeFilename) {
+          const oldFilePath = path.join(staticDir, path.basename(originalFilename))
+          await fs.unlink(oldFilePath).catch(() => {
+            // Old file may not exist if Payload used the new filename
+          })
+        }
       }
     }
 
+    const perCollectionConfig = resolveCollectionConfig(resolvedConfig, collectionSlug)
+
     // When replaceOriginal is on and only one format is configured, the main file
     // is already converted — skip the async job and mark complete immediately.
     if (perCollectionConfig.replaceOriginal && perCollectionConfig.formats.length <= 1) {
@@ -55,7 +61,25 @@ export const createAfterChangeHook = (
       return doc
     }
 
-    // Queue async format conversion job for remaining variants
+    // With cloud storage, variant files cannot be written — skip the async job
+    // and mark complete. CDN-level image optimization (e.g. Next.js Image) can
+    // serve alternative formats on the fly.
+    if (cloudStorage) {
+      await req.payload.update({
+        collection: collectionSlug,
+        id: doc.id,
+        data: {
+          imageOptimizer: {
+            status: 'complete',
+            variants: [],
+          },
+        },
+        context: { imageOptimizer_skip: true },
+      })
+      return doc
+    }
+
+    // Queue async format conversion job for remaining variants (local storage only)
     await req.payload.jobs.queue({
       task: 'imageOptimizer_convertFormats',
       input: {

package/src/hooks/beforeChange.ts

@@ -55,8 +55,17 @@ export const createBeforeChangeHook = (
       data.imageOptimizer.thumbHash = await generateThumbHash(finalBuffer)
     }
 
-    // Store processed buffer in context for afterChange to write to disk
-    // (Payload 3.0 does not use modified req.file.data for the disk write)
+    // Write processed buffer back to req.file so cloud storage adapters
+    // (which read req.file in their afterChange hook) upload the optimized version.
+    // Payload's own uploadFiles step does NOT re-read req.file.data for its local
+    // disk write, so we also store the buffer in context for our afterChange hook
+    // to overwrite the local file when local storage is enabled.
+    req.file.data = finalBuffer
+    req.file.size = finalSize
+    if (perCollectionConfig.replaceOriginal && perCollectionConfig.formats.length > 0) {
+      req.file.name = data.filename
+      req.file.mimetype = data.mimeType
+    }
     context.imageOptimizer_processedBuffer = finalBuffer
 
     return data

package/src/tasks/convertFormats.ts

@@ -7,6 +7,7 @@ import type { ResolvedImageOptimizerConfig } from '../types.js'
 import { resolveCollectionConfig } from '../defaults.js'
 import { convertFormat } from '../processing/index.js'
 import { resolveStaticDir } from '../utilities/resolveStaticDir.js'
+import { fetchFileBuffer, isCloudStorage } from '../utilities/storage.js'
 
 export const createConvertFormatsHandler = (resolvedConfig: ResolvedImageOptimizerConfig) => {
   return async ({ input, req }: { input: { collectionSlug: string; docId: string }; req: any }) => {
@@ -17,16 +18,31 @@ export const createConvertFormatsHandler = (resolvedConfig: ResolvedImageOptimiz
       })
 
       const collectionConfig = req.payload.collections[input.collectionSlug as keyof typeof req.payload.collections].config
-      const staticDir = resolveStaticDir(collectionConfig)
+      const cloudStorage = isCloudStorage(collectionConfig)
+
+      // Cloud storage: variant files cannot be uploaded without direct adapter access.
+      // Mark as complete — CDN-level image optimization handles format conversion.
+      if (cloudStorage) {
+        await req.payload.update({
+          collection: input.collectionSlug as CollectionSlug,
+          id: input.docId,
+          data: {
+            imageOptimizer: {
+              status: 'complete',
+              variants: [],
+            },
+          },
+          context: { imageOptimizer_skip: true },
+        })
+        return { output: { variantsGenerated: 0 } }
+      }
 
+      const staticDir = resolveStaticDir(collectionConfig)
       if (!staticDir) {
         throw new Error(`No staticDir configured for collection "${input.collectionSlug}"`)
       }
 
-      // Sanitize filename to prevent path traversal
-      const safeFilename = path.basename(doc.filename)
-      const filePath = path.join(staticDir, safeFilename)
-      const fileBuffer = await fs.readFile(filePath)
+      const fileBuffer = await fetchFileBuffer(doc, collectionConfig)
 
       const variants: Array<{
         filename: string
@@ -46,6 +62,8 @@ export const createConvertFormatsHandler = (resolvedConfig: ResolvedImageOptimiz
         ? perCollectionConfig.formats.slice(1)
         : perCollectionConfig.formats
 
+      const safeFilename = path.basename(doc.filename)
+
       for (const format of formatsToGenerate) {
         const result = await convertFormat(fileBuffer, format.format, format.quality)
         const variantFilename = `${path.parse(safeFilename).name}-optimized.${format.format}`

package/src/tasks/regenerateDocument.ts

@@ -7,6 +7,7 @@ import type { ResolvedImageOptimizerConfig } from '../types.js'
 import { resolveCollectionConfig } from '../defaults.js'
 import { stripAndResize, generateThumbHash, convertFormat } from '../processing/index.js'
 import { resolveStaticDir } from '../utilities/resolveStaticDir.js'
+import { fetchFileBuffer, isCloudStorage } from '../utilities/storage.js'
 
 export const createRegenerateDocumentHandler = (resolvedConfig: ResolvedImageOptimizerConfig) => {
   return async ({ input, req }: { input: { collectionSlug: string; docId: string }; req: any }) => {
@@ -22,34 +23,14 @@ export const createRegenerateDocumentHandler = (resolvedConfig: ResolvedImageOpt
       }
 
       const collectionConfig = req.payload.collections[input.collectionSlug as keyof typeof req.payload.collections].config
-      const staticDir = resolveStaticDir(collectionConfig)
+      const cloudStorage = isCloudStorage(collectionConfig)
 
-      if (!staticDir) {
-        throw new Error(`No staticDir configured for collection "${input.collectionSlug}"`)
-      }
+      const fileBuffer = await fetchFileBuffer(doc, collectionConfig)
+      const originalSize = fileBuffer.length
+      const perCollectionConfig = resolveCollectionConfig(resolvedConfig, input.collectionSlug)
 
       // Sanitize filename to prevent path traversal
       const safeFilename = path.basename(doc.filename)
-      const filePath = path.join(staticDir, safeFilename)
-
-      let fileBuffer: Buffer
-      try {
-        fileBuffer = await fs.readFile(filePath)
-      } catch {
-        // If file not on disk, try fetching from URL
-        if (doc.url) {
-          const url = doc.url.startsWith('http')
-            ? doc.url
-            : `${process.env.NEXT_PUBLIC_SERVER_URL || ''}${doc.url}`
-          const response = await fetch(url)
-          fileBuffer = Buffer.from(await response.arrayBuffer())
-        } else {
-          throw new Error(`File not found: ${filePath}`)
-        }
-      }
-
-      const originalSize = fileBuffer.length
-      const perCollectionConfig = resolveCollectionConfig(resolvedConfig, input.collectionSlug)
 
       // Step 1: Strip metadata + resize
       const processed = await stripAndResize(
@@ -73,26 +54,13 @@ export const createRegenerateDocumentHandler = (resolvedConfig: ResolvedImageOpt
         newMimeType = converted.mimeType
       }
 
-      // Write optimized file to disk
-      const newFilePath = path.join(staticDir, newFilename)
-      await fs.writeFile(newFilePath, mainBuffer)
-
-      // Clean up old file if filename changed
-      if (newFilename !== safeFilename) {
-        await fs.unlink(filePath).catch(() => {})
-      }
-
       // Step 2: Generate ThumbHash
       let thumbHash: string | undefined
       if (resolvedConfig.generateThumbHash) {
         thumbHash = await generateThumbHash(mainBuffer)
       }
 
-      // Step 3: Convert to configured formats (skip primary when replaceOriginal)
-      const formatsToGenerate = perCollectionConfig.replaceOriginal && perCollectionConfig.formats.length > 0
-        ? perCollectionConfig.formats.slice(1)
-        : perCollectionConfig.formats
-
+      // Step 3: Store the optimized file
       const variants: Array<{
         filename: string
         filesize: number
@@ -103,47 +71,96 @@ export const createRegenerateDocumentHandler = (resolvedConfig: ResolvedImageOpt
         width: number
       }> = []
 
-      for (const format of formatsToGenerate) {
-        const result = await convertFormat(mainBuffer, format.format, format.quality)
-        const variantFilename = `${path.parse(newFilename).name}-optimized.${format.format}`
-        await fs.writeFile(path.join(staticDir, variantFilename), result.buffer)
-
-        variants.push({
-          format: format.format,
-          filename: variantFilename,
-          filesize: result.size,
-          width: result.width,
-          height: result.height,
-          mimeType: result.mimeType,
-          url: `/api/${input.collectionSlug}/file/${variantFilename}`,
+      if (cloudStorage) {
+        // Cloud storage: re-upload the optimized file via Payload's update API.
+        // This triggers the cloud adapter's afterChange hook which uploads to cloud.
+        const updateData: Record<string, any> = {
+          imageOptimizer: {
+            originalSize,
+            optimizedSize: mainSize,
+            status: 'complete',
+            thumbHash,
+            variants: [],
+            error: null,
+          },
+        }
+
+        if (newFilename !== safeFilename) {
+          updateData.filename = newFilename
+          updateData.filesize = mainSize
+          updateData.mimeType = newMimeType
+        }
+
+        await req.payload.update({
+          collection: input.collectionSlug as CollectionSlug,
+          id: input.docId,
+          data: updateData,
+          file: {
+            data: mainBuffer,
+            mimetype: newMimeType || doc.mimeType,
+            name: newFilename,
+            size: mainSize,
+          },
+          context: { imageOptimizer_skip: true },
         })
-      }
+      } else {
+        // Local storage: write files to disk
+        const staticDir = resolveStaticDir(collectionConfig)
+        const newFilePath = path.join(staticDir, newFilename)
+        await fs.writeFile(newFilePath, mainBuffer)
+
+        // Clean up old file if filename changed
+        if (newFilename !== safeFilename) {
+          const oldFilePath = path.join(staticDir, safeFilename)
+          await fs.unlink(oldFilePath).catch(() => {})
+        }
 
-      // Step 4: Update the document with all optimization data
-      const updateData: Record<string, any> = {
-        imageOptimizer: {
-          originalSize,
-          optimizedSize: mainSize,
-          status: 'complete',
-          thumbHash,
-          variants,
-          error: null,
-        },
-      }
+        // Generate variant files (local storage only)
+        const formatsToGenerate = perCollectionConfig.replaceOriginal && perCollectionConfig.formats.length > 0
+          ? perCollectionConfig.formats.slice(1)
+          : perCollectionConfig.formats
+
+        for (const format of formatsToGenerate) {
+          const result = await convertFormat(mainBuffer, format.format, format.quality)
+          const variantFilename = `${path.parse(newFilename).name}-optimized.${format.format}`
+          await fs.writeFile(path.join(staticDir, variantFilename), result.buffer)
+
+          variants.push({
+            format: format.format,
+            filename: variantFilename,
+            filesize: result.size,
+            width: result.width,
+            height: result.height,
+            mimeType: result.mimeType,
+            url: `/api/${input.collectionSlug}/file/${variantFilename}`,
+          })
+        }
 
-      // Update filename, mimeType, and filesize when replaceOriginal changed them
-      if (newFilename !== safeFilename) {
-        updateData.filename = newFilename
-        updateData.filesize = mainSize
-        updateData.mimeType = newMimeType
-      }
+        // Update the document with optimization data
+        const updateData: Record<string, any> = {
+          imageOptimizer: {
+            originalSize,
+            optimizedSize: mainSize,
+            status: 'complete',
+            thumbHash,
+            variants,
+            error: null,
+          },
+        }
 
-      await req.payload.update({
-        collection: input.collectionSlug as CollectionSlug,
-        id: input.docId,
-        data: updateData,
-        context: { imageOptimizer_skip: true },
-      })
+        if (newFilename !== safeFilename) {
+          updateData.filename = newFilename
+          updateData.filesize = mainSize
+          updateData.mimeType = newMimeType
+        }
+
+        await req.payload.update({
+          collection: input.collectionSlug as CollectionSlug,
+          id: input.docId,
+          data: updateData,
+          context: { imageOptimizer_skip: true },
+        })
+      }
 
       return { output: { status: 'complete' } }
     } catch (err) {

package/src/utilities/storage.ts

@@ -0,0 +1,50 @@
+import fs from 'fs/promises'
+import path from 'path'
+
+import { resolveStaticDir } from './resolveStaticDir.js'
+
+/**
+ * Returns true when the collection uses cloud/external storage (disableLocalStorage: true).
+ * When true, files are uploaded by external adapter hooks — no local FS writes should happen.
+ */
+export function isCloudStorage(collectionConfig: { upload?: boolean | Record<string, any> }): boolean {
+  return typeof collectionConfig.upload === 'object' && collectionConfig.upload.disableLocalStorage === true
+}
+
+/**
+ * Reads a file buffer from local disk or fetches it from URL.
+ * Tries local disk first (when available), falls back to URL fetch.
+ * This makes the plugin storage-agnostic — works with local FS and cloud storage alike.
+ */
+export async function fetchFileBuffer(
+  doc: { filename?: string; url?: string },
+  collectionConfig: { upload?: boolean | Record<string, any> },
+): Promise<Buffer> {
+  const safeFilename = doc.filename ? path.basename(doc.filename) : undefined
+
+  // Try local disk first (only when local storage is enabled)
+  if (!isCloudStorage(collectionConfig) && safeFilename) {
+    const staticDir = resolveStaticDir(collectionConfig)
+    if (staticDir) {
+      try {
+        return await fs.readFile(path.join(staticDir, safeFilename))
+      } catch {
+        // Fall through to URL fetch
+      }
+    }
+  }
+
+  // Fetch from URL (works for cloud storage and as fallback for local)
+  if (doc.url) {
+    const url = doc.url.startsWith('http')
+      ? doc.url
+      : `${process.env.NEXT_PUBLIC_SERVER_URL || ''}${doc.url}`
+    const response = await fetch(url)
+    if (!response.ok) {
+      throw new Error(`Failed to fetch file from ${url}: ${response.status} ${response.statusText}`)
+    }
+    return Buffer.from(await response.arrayBuffer())
+  }
+
+  throw new Error(`Cannot read file: no local path or URL available for "${doc.filename}"`)
+}