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

default discord avatar
arielarial11 months ago

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

    Star on GitHub

    Star

    Chat on Discord

    Discord

    online

    Can't find what you're looking for?

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