Files correctly uploaded to S3 but URL still pointing to localhost

[mortal carbon]

I have configured the cloud storage plugin with S3, so files are uploaded to S3 - but the S3 URL is not used to download the files - I can't seem to find any information on why this is happening.

This is the payload config:

plugins: [ cloudStorage({ collections: { 'notes': { 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, }) }, }, }), ],

I am using AWS S3 not the endpoint should not provided...
In the 'Notes' collection - the disableLocalStorage boolean is set to true:

slug: 'notes', upload: { disableLocalStorage: true },

The url of the uploaded file is still "http://localhost:3000/notes/43_s_rockbass.mp3" but instead it should point to the corresponding S3 bucket - the file is uploaded on S3 - the problem is just the URL.

I guess I am missing a config in the collection?

Thanks in advance, Nico

[mortal carbon]

Ok I found the answer, it's quite obvious, the server stills acts as a proxy in order to provide access control - "all uploads will still be reached from the default /collectionSlug/staticURL/filename path. This plugin will "pass through" all files that are hosted on your third-party cloud service—with the added benefit of keeping your existing access control in place." - https://github.com/payloadcms/plugin-cloud-storage/tree/master#payload-access-control

[gaunt spear]

hey @mortal carbon - I believe i'm experiencing the same issue, could you share a little more info on how you resolved this?

[supple robin]

I got it to work by adding NEXT_PUBLIC_S3_HOSTNAME to the .env file and generateUrl to the payload config

Also set disablePayloadAccessControl: true if you want to directly get the image from s3 bucket (which is faster then to go through payload access control, but only recommended for public buckets!)

[lyric grove]

I was struggeling with the same issue.. as pointed out by @supple robin the key is disablePayloadAccessControl: true . The next problem I ran into was that the thumbnailURLs were still pointing to the payload url and not to the bucket. I am not sure if this is intentional or a bug but you can fix this with adminThumbnail: ({ doc }) => generateThumbnailUrl({ doc }), in your collection config, where generateThumbnailUrlis a function returning the bucket url.

[indigo spoke]

This works really well! How do I use the thumbnail URL that's been generated though? Because the current config overrides it, right?

[indigo spoke]

Danke for posting this, was really helpful!