Using prefix and clientUpload options with vercel blob storage plugin throws errors

[Dince-afk]

Describe the Bug

Blob storage uploads with this basic vercel blob storage plugin do work.

plugins: [
    vercelBlobStorage({
      collections: {
        media: true
      },
      
      token: process.env.BLOB_READ_WRITE_TOKEN,
    }),

But when I add the following two configs (prefix and clientUploads)...

plugins: [
    vercelBlobStorage({
      collections: {
        media: {
          prefix: "manual-battery-charger",
        },
      },
      clientUploads: true,
      token: process.env.BLOB_READ_WRITE_TOKEN,
    }),

... I get error messages:

[02:04:16] ERROR: There was an error while uploading files corresponding to the collection media with filename bea.pdf:
[02:04:16] ERROR: Vercel Blob: Missing [x]-content-length header.
    err: {
      "type": "BlobError",
      "message": "Vercel Blob: Missing [x]-content-length header.",
      "stack":
          Error: Vercel Blob: Missing [x]-content-length header.
              at getBlobError (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:162:15)
              at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:194:31)
              at async requestApi (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:181:23)
              at async put (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:701:22)
              at async Object.eval [as handleUpload] (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/dist/handleUpload.js:12:24)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/plugin-cloud-storage/dist/hooks/beforeChange.js:38:21)
              at async Promise.all (index 0)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/plugin-cloud-storage/dist/hooks/beforeChange.js:46:17)
              at async createOperation (webpack-internal:///(rsc)/./node_modules/payload/dist/collections/operations/create.js:145:24)
              at async createHandler (webpack-internal:///(rsc)/./node_modules/payload/dist/collections/endpoints/create.js:28:17)
              at async handleEndpoints (webpack-internal:///(rsc)/./node_modules/payload/dist/utilities/handleEndpoints.js:178:26)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/next/dist/routes/rest/index.js:27:20)
...
[02:04:16] ERROR: Vercel Blob: Missing [x]-content-length header.
    err: {
      "type": "BlobError",
      "message": "Vercel Blob: Missing [x]-content-length header.",
      "stack":
          Error: Vercel Blob: Missing [x]-content-length header.
              at getBlobError (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:162:15)
              at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:194:31)
              at async requestApi (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:181:23)
              at async put (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/node_modules/@vercel/blob/dist/chunk-IDKCY4S2.js:701:22)
              at async Object.eval [as handleUpload] (webpack-internal:///(rsc)/./node_modules/@payloadcms/storage-vercel-blob/dist/handleUpload.js:12:24)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/plugin-cloud-storage/dist/hooks/beforeChange.js:38:21)
              at async Promise.all (index 0)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/plugin-cloud-storage/dist/hooks/beforeChange.js:46:17)
              at async createOperation (webpack-internal:///(rsc)/./node_modules/payload/dist/collections/operations/create.js:145:24)
              at async createHandler (webpack-internal:///(rsc)/./node_modules/payload/dist/collections/endpoints/create.js:28:17)
              at async handleEndpoints (webpack-internal:///(rsc)/./node_modules/payload/dist/utilities/handleEndpoints.js:178:26)
              at async eval (webpack-internal:///(rsc)/./node_modules/@payloadcms/next/dist/routes/rest/index.js:27:20)
...
POST /api/media?depth=0&fallback-locale=null 500 in 456ms

It does create the file on vercel blob storage. But not in the correct "manual-battery-charger" directory, but as a file in the blobs root directory like this: "manual-battery-chargerfile_name.pdf".

And somehow payloadcms doesn't register that file creation and doesn't create a new media document for it. I can see it though on the vercel blob storage website.

I am at a loss on how to tackle this. Help would be much appreciated!

Link to the code that reproduces this issue

NA

Reproduction Steps

NA

Which area(s) are affected? (Select all that apply)

plugin: cloud-storage

Environment Info

Binaries:
  Node: 22.16.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.11.0
Relevant Packages:
  payload: 3.39.1
  next: 15.3.2
  @payloadcms/db-mongodb: 3.39.1
  @payloadcms/email-nodemailer: 3.39.1
  @payloadcms/graphql: 3.39.1
  @payloadcms/next/utilities: 3.39.1
  @payloadcms/payload-cloud: 3.39.1
  @payloadcms/plugin-cloud-storage: 3.39.1
  @payloadcms/plugin-import-export: 3.39.1
  @payloadcms/richtext-lexical: 3.39.1
  @payloadcms/storage-vercel-blob: 3.39.1
  @payloadcms/translations: 3.39.1
  @payloadcms/ui/shared: 3.39.1
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.4.0: Fri Apr 11 18:32:43 PDT 2025; root:xnu-11417.101.15~117/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@latest -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[Dince-afk]

Recreated it with a functioning reproduction repo.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.