Can't access media files when deployed on payloadcms.app but it's working locally

default discord avatar
nicolaslair
8 months ago
7

Basically I have a media collection - When I launch it locally I can play the files - for ex

http://localhost:3000/media/48_kwele3_cv_riff1_mp3.mp3


But when deployed online it's blocked by Express I guess -

https://o-gen-admin.payloadcms.app/media/48_kwele3_cv_riff1.mp3

The files are uploaded on S3 and the collections is configured to be accessible - as far as I know:



access: { read: () => true, create: () => true, update: () => true, }, upload: { disableLocalStorage: true, },

Is there anything else that should be done so the files are accessible online? Thanks!



Any idea? Thanks in advance!

  • discord user avatar
    jesschow
    Payload Team
    8 months ago

    Hi @nicolaslair - looking into this! will get you an answer here today

  • discord user avatar
    denolfe
    Payload Team
    8 months ago

    Are you pulling in the Payload cloud plugin into your config? You can see how this is done here in one of our cloud templates:

    https://github.com/payloadcms/template-blank/blob/main/src/payload.config.ts#L26


    Plugin docs here as well:

    https://github.com/payloadcms/plugin-cloud
  • default discord avatar
    nicolaslair
    8 months ago

    Hi @denolfe & @jesschow - thanks for the reply, I am using plugin-cloud-storage, and not plugin-cloud, here is my config:



    import { buildConfig } from 'payload/config'; import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3'; import { cloudStorage } from '@payloadcms/plugin-cloud-storage'; import path from 'path'; import { Users, Projects, Notes, Media, InstrumentTags, ProjectTags, Menu, MasterInstruments, CustomInstruments} from './collections'; export default buildConfig({ serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL, upload: { useTempFiles: true, }, admin: { user: Users.slug, }, collections: [ Users, Projects, ProjectTags, Menu, MasterInstruments, CustomInstruments, InstrumentTags, Notes, Media, ], cors: '*', csrf: [ 'http://localhost', 'http://localhost:8080', 'https://*.vercel.app' ], plugins: [ cloudStorage({ collections: { 'media': { adapter: s3Adapter({ config: { forcePathStyle: true, region: process.env.S3_REGION, credentials: { accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, }, }, bucket: process.env.S3_BUCKET, }), }, }, }), ], typescript: { outputFile: path.resolve(__dirname, 'payload-types.ts'), }, graphQL: { schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'), }, })

    It's working perfectly locally but not when deployed on payloadcms.app - Thanks in advance



    PS: I need to control the AWS S3 bucket on which the files are uploaded - Is it possible using the payloadCloud plugin?

  • discord user avatar
    denolfe
    Payload Team
    8 months ago
    But when deployed online it's blocked by Express I guess

    What behavior are you seeing exactly when you describe "blocked by Express"? Is this on your own server or in Payload Cloud? Do you have all of the necessary env vars loaded where you're deploying?



    plugin-cloud-storage

    works great if you already have your own bucket you'd like to use.

  • default discord avatar
    nicolaslair
    8 months ago

    Thanks @denolfe - the request is blocked as you can see here:

    https://o-gen-admin.payloadcms.app/media/48_kwele3_cv_riff1.mp3

    - when launched locally I have a media player so I can play the mp3 file...



    It seems to me that it's an express.static issue on payloadcms - what dl you think?

  • discord user avatar
    denolfe
    Payload Team
    8 months ago

    Can you confirm that you have the file in your S3 bucket?



    and also that you've provided all environment variables to the project when deploy?

  • default discord avatar
    nicolaslair
    7 months ago

    Thanks @denolfe - you were right, the bucket had been updated but not on Payload - stupid mistake - sorry for the time it took!

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.