undefined media URL with payload-cloud-storage S3 in next-payload project

default discord avatar
arielarial
last month

Hi!



I'm using plugin-cloud-storage in a next-payload project. When I create a new Media, it will be uploaded and show in the aws bucket correctly, but it will not show inside Payload admin. Checking the media info in the API tab, the "url" property is "undefined/bucket-name/file-name.jpg".



It seems like the "base url" for the file is not set somewhere, but I didn't find anything like this in the documentation (except for Azure adapter). What am I missing here? Thanks!



payload.config:


[...]
import { buildConfig } from "payload/config";
import { cloudStorage } from "@payloadcms/plugin-cloud-storage";
import { s3Adapter } from "@payloadcms/plugin-cloud-storage/s3";

const adapter = s3Adapter({
  config: {
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID || "",
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY || "",
    },
    region: process.env.S3_REGION || "us-east-1",
  },
  bucket: process.env.S3_BUCKET || "",
});

export default buildConfig({
  [...]
  plugins: [
    cloudStorage({
      collections: {
        media: {
          adapter,
          disablePayloadAccessControl: true,
        },
      },
    }),
  ],
});


package.json


  "dependencies": {
    "@aws-sdk/client-s3": "^3.437.0",
    "@aws-sdk/lib-storage": "^3.437.0",
    "@payloadcms/next-payload": "^0.1.8",
    "@payloadcms/plugin-cloud-storage": "^1.1.1",
    "@payloadcms/richtext-lexical": "^0.1.15",
    "aws-crt": "^1.18.2",
    "next": "13.5.6",
    "payload": "^2.0.13",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.6",
    "typescript": "^5"
  }


ok, so apparently what was missing was an

endpoint

prop in the adapter's config. But I found this odd, because in the documentation it states that you should only use this prop if you're in a custom provider, other than S3:

https://github.com/payloadcms/plugin-cloud-storage/tree/master#other-s3-compatible-storage

Anyway, I've set it to

"https://s3.amazonaws.com"

and it is working now

    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.