payloadcms / payloadcms/payload

Improve admin upload error for Vercel 4.5 MB function body limit

Open
#16,484 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

stale
Dominant language
TypeScript
Stars
44.8k
Forks
4.2k
Avg merge
2d 21h
Merged PRs (30d)
53

Description

Describe the Feature

When a Payload app is deployed on Vercel and media uploads are sent through the server upload path, files larger than Vercel Functions' request body limit fail with a raw 413 Content Too Large / FUNCTION_PAYLOAD_TOO_LARGE network error.

It would be helpful if the Payload admin upload UI could detect this failure and show a clearer message with file-size context, for example:

Upload failed: this file is 5.1 MB, but this deployment can only accept about 4.5 MB through the server upload route. Enable client uploads for your storage adapter, or upload a smaller file.

Use Case

In a Payload 3 + Next.js + Vercel deployment using @payloadcms/storage-vercel-blob, uploading a 5.1 MB PDF to /api/media?depth=0&fallback-locale=null failed online with:

POST https://example.vercel.app/api/media?depth=0&fallback-locale=null 413 (Content Too Large)

The same file worked locally, and the Payload config had a larger upload limit, so the root cause was not obvious from the admin UI.

The fix was to enable direct client uploads:

vercelBlobStorage({
  collections: { media: { disablePayloadAccessControl: true } },
  clientUploads: true,
  token: process.env.BLOB_READ_WRITE_TOKEN,
})
Proposed Improvement

When an admin upload request receives HTTP 413, display a specialized upload error that includes:

  • the selected file size in MB
  • the server/provider response status, e.g. 413 Content Too Large
  • guidance that hosted/serverless providers may have lower request body limits than Payload's configured upload.limits.fileSize
  • for Vercel Blob / cloud storage adapters, a hint to enable clientUploads

This would make the problem understandable without needing to inspect the browser console/network tab.

Related Context

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the admin upload UI and the /api/media request path, then trace how HTTP 413 responses are surfaced. Check the existing upload error handling and the related Vercel Blob clientUploads documentation. Done means a 413 upload displays the file size, provider status, and guidance about serverless limits and client uploads.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
api, frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.