Skip to main content

Strapi

Strapi v4 and v5 support custom upload providers. Use the @strapi/provider-upload-aws-s3 package — it's the official S3 provider and works against Filebase by overriding the endpoint.

Install​

npm install @strapi/provider-upload-aws-s3

Configure​

config/plugins.js
module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        s3Options: {
          credentials: {
            accessKeyId: env('FILEBASE_KEY'),
            secretAccessKey: env('FILEBASE_SECRET'),
          },
          endpoint: 'https://s3.filebase.io',
          region: 'auto',
          params: {
            Bucket: env('FILEBASE_BUCKET'),
          },
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

Configure URL middleware​

Tell Strapi to allow Filebase's hostname when it generates <img> and <source> URLs:

config/middlewares.js
module.exports = [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            's3.filebase.io',
            '*.s3.filebase.io',
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            's3.filebase.io',
            '*.s3.filebase.io',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];

Public URLs​

Strapi generates public URLs of the form https://<bucket>.s3.filebase.io/<key>. These are CDN-accelerated and cached at the edge.

What's next​