I was able to setup my cloud storage but how can I make it that the images it uses are the cloud images? I personally thought of a url kind of way. I have my Bucket on supabase public so I get a url like:

https://{string}.supabase.co/storage/v1/object/{bucket-name}//{filename.filetype}

How can I make my media collection use that instead of the localhost path?

Or is this a bad idea and should I use something else?

sharath_98807last year
in your plugin config use generateFileUrl, like this

collections: {

fileupload: {

disableLocalStorage: true,

generateFileURL: ({ filename, prefix }) => {

const url =
https://${process.env.S3_BUCKET}.s3.${process.env.S3_REGION}.amazonaws.com/${prefix}/${filename}
return url

},

prefix: process.env.NEXT_PUBLIC_UPLOAD_PREFIX || 'fileupload',

},
kannotloginlast year
Sorry but I'm pretty new to this. So do you mean then in my Media.ts file?

I have this

upload: {

disableLocalStorage: true,

generateFileURL: ({ filename, prefix }) => {

const url =
${process.env.SUPABASE_URL}/storage/v1/object/public/uploads/${filename}
return url

},

},

But it doesn't seem to work

It still shows an localhost link
sharath_98807last year
checkout payload doc storage adaptor , this will help you out where to make changes .
kannotloginlast year
this?

https://payloadcms.com/docs/upload/storage-adapters

more specifike this?

https://payloadcms.com/docs/upload/storage-adapters#custom-usage
sharath_98807last year
yeah. it is not official support for supabase but supabase support s3 so try out custom apdator at the end of page.
kannotloginlast year
Okey ty

Sorry to annoy you once again but I have been able to make it work for admi thumbnails but not for my frontend.

upload: {

disableLocalStorage: true,

adminThumbnail: ({ doc }) => {

if (doc?.filename) {

return
https://(hostingplatformurl)/storage/v1/object/public/uploads//${doc.filename}
}

return null

},

},

I created that and my admin photo's show that but the moment I go to my front-end it uses localhost again...

So if I copy the image url on the admin panel I go to

https://(hostingplatformurl)/storage/v1/object/public/uploads//${doc.filename}

But if I do it on the front end on a product I go to

http://localhost:3000/media/${doc.filename}

How do I change that? I can't find it in the documentation

sharath_98807last year

you have to change it in plugin not collection.

i will give you my postmedia collection eg

import { superAdmin } from '@/access/superAdmin'
import {
  FixedToolbarFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'
import type { CollectionConfig } from 'payload'
import { v4 as uuidv4 } from 'uuid'
import { anyone } from '../access/anyone'
import { authenticated } from '../access/authenticated'

export const PostMedia: CollectionConfig = {
  slug: 'postmedia',
  labels: {
    singular: 'Post Media',
    plural: 'Post Media',
  },
  access: {
    create: authenticated,
    delete: authenticated,
    read: anyone,
    update: authenticated,
  },
  admin: {
    defaultColumns: ['filename', 'alt', 'updatedAt'],
    useAsTitle: 'alt',
    hideAPIURL: !superAdmin,
    group: 'Media Assets',
  },
  fields: [
    {
      name: 'alt',
      type: 'text',
      required: true,
    },
    {
      name: 'caption',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ rootFeatures }) => {
          return [...rootFeatures, FixedToolbarFeature(), InlineToolbarFeature()]
        },
      }),
    },
    {
      name: 'prefix',
      type: 'text',
      admin: {
        hidden: true,
      },
    },
  ],

 upload: {
    disableLocalStorage: true,
    adminThumbnail: 'thumbnail',
    focalPoint: true,
    resizeOptions: {
      width: 1600,
      height: undefined,
    },
    imageSizes: [
      {
        name: 'thumbnail',
        width: 300,
        height: 300,
        formatOptions: {
          format: 'webp',
        },
        generateImageName: ({ originalName }) => {
          return `${originalName}-thumbnail.webp`
        },
      },
      {
        name: 'meta',
        width: 1200,
        height: 630,
        position: 'top',
        fit: 'inside',
        formatOptions: {
          format: 'webp',
        },
        generateImageName: ({ originalName }) => {
          return `${originalName}-meta.webp`
        },
      },
      {
        name: 'og',
        width: 1200,
        height: 630,
        crop: 'center',
        formatOptions: {
          format: 'webp',
        },
      },
    ],
    formatOptions: {
      format: 'webp',
    },
    mimeTypes: ['image/*'],
  },
  hooks: {
    beforeChange: [
      ({ data }) => {
        if (data.filename) {
          const randomString = Math.random().toString(36).substring(2, 10)
          data.filename = `${uuidv4()}-${randomString}-${data.filename}`
        }
        return data
      },
    ],
  },
}

below will be how config in index.ts of plugin folder, im using s3 storage adaptor

 s3StoragePlugin({
    // acl: 'public-read',
    bucket: process.env.S3_BUCKET!,
    enabled: process.env.S3_ENABLED === 'true',
    collections: {
      postmedia: {
        disableLocalStorage: true,
        generateFileURL: ({ filename, prefix }) => {
          const url = `https://${process.env.S3_BUCKET}.s3.${process.env.S3_REGION}.amazonaws.com/${prefix}/${filename}`
          return url
        },
        prefix: process.env.NEXT_PUBLIC_UPLOAD_PREFIX || 'postmedia',
      },
    },
    config: {
      credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID!,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY!,
      },
      endpoint: process.env.S3_ENDPOINT,
      forcePathStyle: true,
      region: process.env.S3_REGION,
    },
  }),

i use hooks i collection to give unique name kinda overkill wil random and uuid, it used beforechange hook which work asynchronously. then plugin handle file url generation based on s3 variables.

kannotloginlast year
Tysm! it's working right now!

So for school my final project or how you wanne call it we had to created a page in html and css and I choose to make it hard for myself and use typescript en scss etc with payload hahaha the problem is that the hosting we got from school doesn't work with node so I had to fix my own hosting which is free and the server goes out after inactivitiy so all my images were deleted but now it's stored on a cloud!

Just like you said I had to add a few thins to my config file
```
cloudStorage({
      collections: {
        media: {
          adapter: storageAdapter,
          disableLocalStorage: true,
          generateFileURL: ({ filename }) => {
            return `https://{codeuser}.supabase.co/storage/v1/object/public/uploads/${filename}`
          },
        },
      },
    }),
```
So I just added these things as you said:
```
disableLocalStorage: true,
generateFileURL: ({ filename }) => {
            return `https://{codeuser}.supabase.co/storage/v1/object/public/uploads/${filename}` 
```
Now it's working on the admin panel it opens on that url and on the front-end it opens on a next.js url but behind that url is the cloud-storage url if I'm correct.
erinjerri12 months ago
i tried this, but do you use cloudPlugin and not s3-storage for payload right? i've been having issues with it pulling images with my custom adapter

Open

Continue the discussion in Discord

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.