#Media collection

21 messages · Page 1 of 1 (latest)

timid gull
#

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?

austere badgeBOT
#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

crude kelp
#

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',
},

timid gull
#

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

crude kelp
#

checkout payload doc storage adaptor , this will help you out where to make changes .

timid gull
crude kelp
#

yeah. it is not official support for supabase but supabase support s3 so try out custom apdator at the end of page.

timid gull
austere badgeBOT
timid gull
# crude kelp yeah. it is not official support for supabase but supabase support s3 so try ou...

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

crude kelp
#

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.

timid gull
#

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!

timid gull
#

Just like you said I had to add a few thins to my config file

      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.