Skip to content
Lucid CMS

S3 Plugin

This plugin registers the required media strategy functions to stream, upload, update and delete media from any S3 compatible storage solution.

Installation

To install the S3 plugin, run the following command in your terminal:

Terminal window
npm i @lucidcms/plugin-s3

Configuration

To use the S3 plugin, you need to add it to your lucid.config.ts or lucid.config.js file. You will need to provide it connection details to your bucket.

lucid.config.ts
import lucid from "@lucidcms/core";
import LucidS3 from "@lucidcms/plugin-s3";


export default lucid.config({
  // ...other config
  plugins: [
    LucidS3({
      clientConfig: {
        endpoint: `https://${process.env.LUCID_CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
        region: "auto",
        credentials: {
          accessKeyId: process.env.LUCID_S3_ACCESS_KEY as string,
          secretAccessKey: process.env.LUCID_S3_SECRET_KEY as string,
        },
      },
      bucket: "my-lucid-bucket",
    }),
  ],
});

Bucket Configuration

As Lucid uses presigned URLs to upload media from the client, you will need to configure your S3 bucket’s CORS policy. This will need to allow PUT requests, along with the Content-Type and Origin headers.

Example Cloudflare R2 CORS Policy

[
  {
    "AllowedOrigins": [
      "http://localhost:3000"
    ],
    "AllowedMethods": [
      "GET",
      "PUT"
    ],
    "AllowedHeaders": [
      "Origin",
      "Content-Type"
    ]
  }
]