typescript - How do I create sub foldersdirectories with PayloadCMS media uploads and the Vercel blob storage? - Stack Overflow

admin管理员组

文章数量:1345096

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

Share Improve this question Follow asked 13 hours ago Dince-afkDince-afk 23222 silver badges99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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

本文标签：