Upload collection using storage adapter does not fetch from cloud when deployed

[makunoia]

Link to reproduction

No response

Payload Version

3.0.0-beta.63

Node Version

v20.14.0

Next.js Version

15.0.0-rc.0

Describe the Bug

I used the S3 Storage Adapter. Images properly load locally but break when my app is deployed to Vercel.

Reproduction Steps

1. create an Asset collection
2. Modify Payload config to use storage adapter

 plugins: [
    s3Storage({
      disableLocalStorage: true,
      collections: {
        assets: true,
      },
      bucket: process.env.CLOUDFLARE_BUCKET_NAME || "",
      config: {
        credentials: {
          accessKeyId: process.env.CLOUDFLARE_ACCESS_KEY_ID || "",
          secretAccessKey: process.env.CLOUDFLARE_SECRET_ACCESS_KEY || "",
        },
        region: process.env.CLOUDFLARE_REGION,
        endpoint: `https://${process.env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
      },
    }),
  ],

3. Use an uploaded image in the app

   <Image
   src={showcaseImage.url}        //  value is /api/assets/file/sample-file.webp,
   alt={showcaseImage.alt}
   fill />

4. Works locally

   

5. Breaks in my Vercel deployment

   

Notes: I'm sure my env variables are set up right.

Adapters and Plugins

S3 Storage Adapter No response

[makunoia]

P.S I noticed on that page that the words "Vercel Blob adapter" appear under other sections, which might be a result of unchecked copy-paste.

[denolfe]

Are there errors in terminal or console when the image load is attempted?

[makunoia]

I think I've pieced together the issue, it seems that there's a problem with authentication

When logged out of Payload CMS,

I fetched the collection doc with getPayloadHMR, and used the URL to access the asset but the console threw me an error. ERROR: Forbidden: You are not allowed to perform this action.

Definitely an issue with authenticating access to the asset during runtime. Any chance you can point me to the right direction?

[makunoia]

I saw issue https://github.com/payloadcms/payload/issues/4096 so I worked around the issue by disabling Payload Access Control, Local Storage, and generating a direct URL to my bucket. My app now loads the images directly from there.

 s3Storage({
      collections: {
        assets: {
          generateFileURL: ({ filename }) => {
            return `${process.env.CLOUDFLARE_BUCKET_PUBLIC_LINK}/${filename}`;
          },
          disableLocalStorage: true,
          disablePayloadAccessControl: true,
        },
      },
     // ... other config
    }),

I'm curious to know whether this is really the way to go since I kinda want to know how to make that auth check work

[denolfe]

@makunoia Judging from the errors you were getting, this is likely just a misconfiguring of Payload's access control. I would expect a different error if it were due to your bucket's permission policies.

While your workaround works for public assets, you obviously would not want to use that method if it were private files of some sort.

I don't have anyone else reporting similar issues, and quite a few projects are deployed and working as expected with S3.

Happy to re-open if you have a solid reproduction that I can follow.

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.