fix(storage-s3): respect upload limits with client uploads (#15176)

Fixes #12671
Relies on #15174 (merge this
one first)

In addition to checking the passed `filesize` from
`S3ClientUploadHandler`, this PR also uses S3 signed headers to ensure
that `ContentLength` does not exceed `upload.limits.fileSize`.

---------

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

Author: r1tsuu

packages/storage-s3/src/client/S3ClientUploadHandler.ts

@@ -1,5 +1,6 @@
 'use client'
 import { createClientUploadHandler } from '@payloadcms/plugin-cloud-storage/client'
+import { toast } from '@payloadcms/ui'
 import { formatAdminURL } from 'payload/shared'
 
 export const S3ClientUploadHandler = createClientUploadHandler({
@@ -9,16 +10,26 @@ export const S3ClientUploadHandler = createClientUploadHandler({
       path: serverHandlerPath,
       serverURL,
     })
+
     const response = await fetch(endpointRoute, {
       body: JSON.stringify({
         collectionSlug,
         filename: file.name,
+        filesize: file.size,
         mimeType: file.type,
       }),
       credentials: 'include',
       method: 'POST',
     })
 
+    if (!response.ok) {
+      const { errors } = (await response.json()) as {
+        errors: { message: string }[]
+      }
+
+      throw new Error(errors.reduce((acc, err) => `${acc ? `${acc}, ` : ''}${err.message}`, ''))
+    }
+
     const { url } = (await response.json()) as {
       url: string
     }

packages/storage-s3/src/generateSignedURL.ts

@@ -4,10 +4,14 @@ import type { PayloadHandler } from 'payload'
 import * as AWS from '@aws-sdk/client-s3'
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
 import path from 'path'
-import { APIError, Forbidden } from 'payload'
+import { APIError, Forbidden, ValidationError } from 'payload'
 
 import type { S3StorageOptions } from './index.js'
 
+const bytesToMB = (bytes: number) => {
+  return bytes / 1024 / 1024
+}
+
 interface Args {
   access?: ClientUploadsAccess
   acl?: 'private' | 'public-read'
@@ -30,9 +34,16 @@ export const getGenerateSignedURLHandler = ({
       throw new APIError('Content-Type expected to be application/json', 400)
     }
 
-    const { collectionSlug, filename, mimeType } = (await req.json()) as {
+    let filesizeLimit = req.payload.config.upload.limits?.fileSize
+
+    if (filesizeLimit === Infinity) {
+      filesizeLimit = undefined
+    }
+
+    const { collectionSlug, filename, filesize, mimeType } = (await req.json()) as {
       collectionSlug: string
       filename: string
+      filesize: number
       mimeType: string
     }
 
@@ -49,12 +60,33 @@ export const getGenerateSignedURLHandler = ({
 
     const fileKey = path.posix.join(prefix, filename)
 
+    const signableHeaders = new Set()
+
+    if (filesizeLimit) {
+      if (filesize > filesizeLimit) {
+        throw new APIError(
+          `Exceeded file size limit. Limit: ${bytesToMB(filesizeLimit).toFixed(2)}MB, got: ${bytesToMB(filesize).toFixed(2)}MB`,
+          400,
+        )
+      }
+
+      // Still force S3 to validate
+      signableHeaders.add('content-length')
+    }
+
     const url = await getSignedUrl(
       // @ts-expect-error mismatch versions or something
       getStorageClient(),
-      new AWS.PutObjectCommand({ ACL: acl, Bucket: bucket, ContentType: mimeType, Key: fileKey }),
+      new AWS.PutObjectCommand({
+        ACL: acl,
+        Bucket: bucket,
+        ContentLength: filesizeLimit ? Math.min(filesize, filesizeLimit) : undefined,
+        ContentType: mimeType,
+        Key: fileKey,
+      }),
       {
         expiresIn: 600,
+        signableHeaders,
       },
     )
 

packages/ui/src/forms/Form/index.tsx

@@ -386,12 +386,12 @@ export const Form: React.FC<FormProps> = (props) => {
         return
       }
 
-      const formData = await contextRef.current.createFormData(overrides, {
-        data,
-        mergeOverrideData: Boolean(typeof overridesFromArgs !== 'function'),
-      })
-
       try {
+        const formData = await contextRef.current.createFormData(overrides, {
+          data,
+          mergeOverrideData: Boolean(typeof overridesFromArgs !== 'function'),
+        })
+
         let res
 
         if (typeof actionArg === 'string') {

test/storage-s3/collections/MediaWithClientUploads.ts

@@ -0,0 +1,15 @@
+import type { CollectionConfig } from 'payload'
+
+export const MediaWithClientUploads: CollectionConfig = {
+  slug: 'media-with-client-uploads',
+  fields: [
+    {
+      name: 'alt',
+      type: 'text',
+      label: 'Alt Text',
+    },
+  ],
+  upload: {
+    disableLocalStorage: true,
+  },
+}

test/storage-s3/config.ts

@@ -7,6 +7,7 @@ import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'
 import { Media } from './collections/Media.js'
 import { MediaWithAlwaysInsertFields } from './collections/MediaWithAlwaysInsertFields.js'
+import { MediaWithClientUploads } from './collections/MediaWithClientUploads.js'
 import { MediaWithDirectAccess } from './collections/MediaWithDirectAccess.js'
 import { MediaWithDynamicPrefix } from './collections/MediaWithDynamicPrefix.js'
 import { MediaWithPrefix } from './collections/MediaWithPrefix.js'
@@ -15,6 +16,7 @@ import { Users } from './collections/Users.js'
 import {
   mediaSlug,
   mediaWithAlwaysInsertFieldsSlug,
+  mediaWithClientUploadsSlug,
   mediaWithDirectAccessSlug,
   mediaWithDynamicPrefixSlug,
   mediaWithPrefixSlug,
@@ -24,8 +26,6 @@ import {
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 
-let uploadOptions
-
 // Load config to work with emulated services
 dotenv.config({
   path: path.resolve(dirname, '../plugin-cloud-storage/.env.emulated'),
@@ -40,6 +40,7 @@ export default buildConfigWithDefaults({
   collections: [
     Media,
     MediaWithAlwaysInsertFields,
+    MediaWithClientUploads,
     MediaWithDirectAccess,
     MediaWithDynamicPrefix,
     MediaWithPrefix,
@@ -57,8 +58,10 @@ export default buildConfigWithDefaults({
   },
   plugins: [
     s3Storage({
+      clientUploads: true,
       collections: {
         [mediaSlug]: true,
+        [mediaWithClientUploadsSlug]: true,
         [mediaWithDirectAccessSlug]: {
           disablePayloadAccessControl: true,
         },
@@ -106,7 +109,11 @@ export default buildConfigWithDefaults({
       enabled: false,
     }),
   ],
-  upload: uploadOptions,
+  upload: {
+    limits: {
+      fileSize: 1_000_000, // 1MB
+    },
+  },
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),
   },

test/storage-s3/int.spec.ts

@@ -11,6 +11,7 @@ import { initPayloadInt } from '../helpers/initPayloadInt.js'
 import {
   mediaSlug,
   mediaWithAlwaysInsertFieldsSlug,
+  mediaWithClientUploadsSlug,
   mediaWithDirectAccessSlug,
   mediaWithDynamicPrefixSlug,
   mediaWithPrefixSlug,
@@ -187,6 +188,92 @@ describe('@payloadcms/storage-s3', () => {
     it.todo('can upload')
   })
 
+  describe('client uploads with size limits', () => {
+    const signedURLEndpoint = '/storage-s3-generate-signed-url'
+
+    it('should generate signed URL for file within size limit', async () => {
+      const filename = 'small-file.png'
+      const filesize = 500_000 // 500KB (within 1MB limit)
+      const mimeType = 'image/png'
+
+      const response = await restClient.POST(signedURLEndpoint, {
+        body: JSON.stringify({
+          collectionSlug: mediaWithClientUploadsSlug,
+          filename,
+          filesize,
+          mimeType,
+        }),
+      })
+
+      expect(response.status).toBe(200)
+      const { url } = (await response.json()) as any
+      expect(url).toBeDefined()
+      expect(url).toContain(process.env.S3_BUCKET)
+      expect(url).toContain(filename)
+    })
+
+    it('should reject file exceeding size limit', async () => {
+      const filename = 'large-file.png'
+      const filesize = 2_000_000 // 2MB (exceeds 1MB limit)
+      const mimeType = 'image/png'
+
+      const response = await restClient.POST(signedURLEndpoint, {
+        body: JSON.stringify({
+          collectionSlug: mediaWithClientUploadsSlug,
+          filename,
+          filesize,
+          mimeType,
+        }),
+      })
+
+      expect(response.status).toBe(400)
+      const { errors } = (await response.json()) as any
+      expect(errors).toBeDefined()
+      expect(errors[0].message).toContain('Exceeded file size limit')
+      expect(errors[0].message).toMatch(/Limit: 0\.9\dMB/) // 1,000,000 bytes ≈ 0.95MB
+      expect(errors[0].message).toMatch(/got: 1\.9\dMB/) // 2,000,000 bytes ≈ 1.91MB
+    })
+
+    it('should reject file exactly at limit boundary', async () => {
+      const filename = 'boundary-file.png'
+      const filesize = 1_000_001 // Just over 1MB limit
+      const mimeType = 'image/png'
+
+      const response = await restClient.POST(signedURLEndpoint, {
+        body: JSON.stringify({
+          collectionSlug: mediaWithClientUploadsSlug,
+          filename,
+          filesize,
+          mimeType,
+        }),
+      })
+
+      expect(response.status).toBe(400)
+      const { errors } = (await response.json()) as any
+      expect(errors).toBeDefined()
+      expect(errors[0].message).toContain('Exceeded file size limit')
+    })
+
+    it('should accept file exactly at limit', async () => {
+      const filename = 'exact-limit.png'
+      const filesize = 1_000_000 // Exactly 1MB
+      const mimeType = 'image/png'
+
+      const response = await restClient.POST(signedURLEndpoint, {
+        body: JSON.stringify({
+          collectionSlug: mediaWithClientUploadsSlug,
+          filename,
+          filesize,
+          mimeType,
+        }),
+      })
+
+      expect(response.status).toBe(200)
+      const { url } = (await response.json()) as any
+      expect(url).toBeDefined()
+    })
+  })
+
   describe('prefix collision detection', () => {
     beforeEach(async () => {
       // Clear S3 bucket before each test

test/storage-s3/payload-types.ts

@@ -69,6 +69,7 @@ export interface Config {
   collections: {
     media: Media;
     'media-with-always-insert-fields': MediaWithAlwaysInsertField;
+    'media-with-client-uploads': MediaWithClientUpload;
     'media-with-direct-access': MediaWithDirectAccess;
     'media-with-dynamic-prefix': MediaWithDynamicPrefix;
     'media-with-prefix': MediaWithPrefix;
@@ -83,6 +84,7 @@ export interface Config {
   collectionsSelect: {
     media: MediaSelect<false> | MediaSelect<true>;
     'media-with-always-insert-fields': MediaWithAlwaysInsertFieldsSelect<false> | MediaWithAlwaysInsertFieldsSelect<true>;
+    'media-with-client-uploads': MediaWithClientUploadsSelect<false> | MediaWithClientUploadsSelect<true>;
     'media-with-direct-access': MediaWithDirectAccessSelect<false> | MediaWithDirectAccessSelect<true>;
     'media-with-dynamic-prefix': MediaWithDynamicPrefixSelect<false> | MediaWithDynamicPrefixSelect<true>;
     'media-with-prefix': MediaWithPrefixSelect<false> | MediaWithPrefixSelect<true>;
@@ -183,6 +185,25 @@ export interface MediaWithAlwaysInsertField {
   focalX?: number | null;
   focalY?: number | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media-with-client-uploads".
+ */
+export interface MediaWithClientUpload {
+  id: string;
+  alt?: string | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media-with-direct-access".
@@ -315,6 +336,10 @@ export interface PayloadLockedDocument {
         relationTo: 'media-with-always-insert-fields';
         value: string | MediaWithAlwaysInsertField;
       } | null)
+    | ({
+        relationTo: 'media-with-client-uploads';
+        value: string | MediaWithClientUpload;
+      } | null)
     | ({
         relationTo: 'media-with-direct-access';
         value: string | MediaWithDirectAccess;
@@ -438,6 +463,24 @@ export interface MediaWithAlwaysInsertFieldsSelect<T extends boolean = true> {
   focalX?: T;
   focalY?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "media-with-client-uploads_select".
+ */
+export interface MediaWithClientUploadsSelect<T extends boolean = true> {
+  alt?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media-with-direct-access_select".

test/storage-s3/shared.ts

@@ -6,3 +6,4 @@ export const prefix = 'test-prefix'
 
 export const mediaWithSignedDownloadsSlug = 'media-with-signed-downloads'
 export const mediaWithDirectAccessSlug = 'media-with-direct-access'
+export const mediaWithClientUploadsSlug = 'media-with-client-uploads'