Here is my current media collection config:

import type { CollectionConfig } from "payload";

export const Media: CollectionConfig = {
  slug: "media",
...
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "alt",
      type: "text",
      required: true,
    },
  ],
  upload: {
    staticDir: "norrkeoeping",
    adminThumbnail: "thumbnail",
  },
};

And here my general payload config:

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

I thought the setup above should suffice. Having the "staticDir: "norrkeoeping"" create a new quasi folder in Vercel blob storage on each upload. But that is not the case. Each time I upload an image for example via the Payload admin upload feature it uploads the file successfully, but just dumps the file on the "root" directory in Vercel blob storage.

This makes my blob storage explorer in Vercel look very messy. Especially since now I'm starting to use that one blob storage for multiple projects. I would therefore very much like a folder for each project.

Additional question, how does PayloadCMS actually handle the Vercel blob storage? I ask because I was surprised to see the same vercel blob storage connection in one project show only the files uploaded via its payload admin upload and the other only its specifically uploaded files.

How does that work? Does it have to do with the Payload secret you have to create maybe? I don't like the mystification of the blob upload feature.

Here the docs:

Upload Storage Adapters

Here is my current media collection config:

import type { CollectionConfig } from "payload";

export const Media: CollectionConfig = {
  slug: "media",
...
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "alt",
      type: "text",
      required: true,
    },
  ],
  upload: {
    staticDir: "norrkeoeping",
    adminThumbnail: "thumbnail",
  },
};

And here my general payload config:

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

I thought the setup above should suffice. Having the "staticDir: "norrkeoeping"" create a new quasi folder in Vercel blob storage on each upload. But that is not the case. Each time I upload an image for example via the Payload admin upload feature it uploads the file successfully, but just dumps the file on the "root" directory in Vercel blob storage.

This makes my blob storage explorer in Vercel look very messy. Especially since now I'm starting to use that one blob storage for multiple projects. I would therefore very much like a folder for each project.

Additional question, how does PayloadCMS actually handle the Vercel blob storage? I ask because I was surprised to see the same vercel blob storage connection in one project show only the files uploaded via its payload admin upload and the other only its specifically uploaded files.

How does that work? Does it have to do with the Payload secret you have to create maybe? I don't like the mystification of the blob upload feature.

Here the docs:

Upload Storage Adapters

• typescript
• vercel
• blobstorage
• payload-cms

1 Answer 1

You can use the prefix field to set a sub-directory.

vercelBlobStorage({
      enabled: true,
      collections: {
        media: {
          prefix: 'cms_images',
        },
      },
      token: process.env.BLOB_READ_WRITE_TOKEN,
    })

As of now, there's no fix for this. You can manually handle uploads as shown here