strapi-upload-supabase-provider

Resources

• LICENSE

Links

• Strapi website
• Strapi documentation
• Supabase
• Supabase documentation
• Github repository

Installation

# using yarn
yarn add strapi-upload-supabase-provider

# using npm
npm install strapi-upload-supabase-provider --save

Configuration

• provider defines the name of the provider, in this case we must put "strapi-upload-supabase-provider".
• providerOptions is passed down during the construction of the provider. (ex: new StorageClient(config)).
• providerOptions.apiUrl RESTful endpoint to manage your Supabase project.
• providerOptions.apiKey API key of your Supabase project(service_role not anon).
• providerOptions.bucket name of your Supabase bucket.
• providerOptions.directory directory inside the bucket where you want to store your files.
• sizeLimit maximum size limit for your files on bytes.

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-upload-supabase-provider",
      providerOptions: {
        apiUrl: env("SUPABASE_API_URL"),
        apiKey: env("SUPABASE_API_KEY"),
        bucket: env("SUPABASE_BUCKET_NAME"),
        directory: env("SUPABASE_BUCKET_DIRECTORY"),
      },
      sizeLimit: 1000000000,
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
        checkFileSize: {},
      },
    },
  },
  // ...
});

Security Middleware Configuration

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

./config/middlewares.js

module.exports = [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        directives: {
          "default-src": ["'self'"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            env("SUPABASE_API_URL"),
          ],
        },
      },
    },
  },
  // ...
];