Cloudflare R2 w/ Public URL logo

Cloudflare R2 w/ Public URL

By KesvaL Studio

Use Cloudflare R2 with a public URL using the AWS API!

Latest version

v1.3.3

released August 10, 2025

npm install strapi-provider-cloudflare-r2-aws

npm version

Note: this is a fork of strapi-provider-cloudflare-r2 that is updated to use AWS SDK v3 and Strapi v5.

strapi-provider-cloudflare-r2-aws

Installation

# using pnpm (recommended)
pnpm add strapi-provider-cloudflare-r2-aws

# using npm
npm install strapi-provider-cloudflare-r2-aws --save

Configuration

See the documentation about using a provider for information on installing and using a provider. To understand how environment variables are used in Strapi, please refer to the documentation about environment variables.

Provider Configuration

./config/plugins.js or ./config/plugins.ts for TypeScript projects:

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-cloudflare-r2-aws",
      providerOptions: {
        credentials: {
          accessKeyId: env("CF_ACCESS_KEY_ID"),
          secretAccessKey: env("CF_ACCESS_SECRET"),
        },
        /**
         * `https://<ACCOUNT_ID>.r2.cloudflarestorage.com`
         */
        endpoint: env("CF_ENDPOINT"),
        params: {
          Bucket: env("CF_BUCKET"),
        },
        /**
         * Set this Option to store the CDN URL of your files and not the R2 endpoint URL in your DB.
         * Can be used in Cloudflare R2 with Domain-Access or Public URL: https://pub-<YOUR_PULIC_BUCKET_ID>.r2.dev
         * This option is required to upload files larger than 5MB, and is highly recommended to be set.
         * Check the cloudflare docs for the setup: https://developers.cloudflare.com/r2/data-access/public-buckets/#enable-public-access-for-your-bucket
         */
        cloudflarePublicAccessUrl: env("CF_PUBLIC_ACCESS_URL"),
        /**
         * Sets if all assets should be uploaded in the root dir regardless the strapi folder.
         * It is useful because strapi sets folder names with numbers, not by user's input folder name
         * By default it is false
         */
        pool: false,
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  // ...
});

Where to find the configuration options
You can find all needed values in the Cloudflare dashboard unter R2. All your buckets, your account ID and the access keys can be found there.

  • endpoint: https://<ACCOUNT_ID>.r2.cloudflarestorage.com
  • accessKeyId: You need to click on Manage R2 API Tokens to create a new token.
  • secretAccessKey: You need to click on Manage R2 API Tokens to create a new token.

Security Middleware Configuration

Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly display thumbnail previews in the Media Library. You should replace the strapi::security string with the object below instead as explained in the middleware configuration documentation.

./config/middlewares.js

module.exports = ({ env }) => [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            env("CF_PUBLIC_ACCESS_URL")
              ? env("CF_PUBLIC_ACCESS_URL").replace(/^https?:\/\//, "")
              : "",
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "market-assets.strapi.io",
            env("CF_PUBLIC_ACCESS_URL")
              ? env("CF_PUBLIC_ACCESS_URL").replace(/^https?:\/\//, "")
              : "",
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];

Bucket CORS Configuration

Do not forget to configure your R2 Endpoint CORS settings as described here: https://developers.cloudflare.com/r2/buckets/cors/

The simplest configuration is to allow GET from all origins:

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"]
  }
]

More safe would be to only allow it from your Strapi deployment Origins (better for production):

[
  {
    "AllowedOrigins": ["YOUR STRAPI URL"],
    "AllowedMethods": ["GET"]
  }
]

Sponsors

Strapi Plugin developed and maintained by KesvaL Studio

Submit your content

Share your work with the community and get it listed in the Strapi ecosystem for everyone to discover and use.

Submit
Submit your content