Strapi Upload Provider for Supabase Storage

This is a Strapi provider for uploading files to Supabase storage. The provider offers options for dynamic directories, file size limits, signed URLs, and transformation parameters.

Parameters

The following parameters are used by the provider:

• apiUrl : string Your Supabase API Url
• apiKey : string Your Supabase API Key
• bucket : string Your Supabase storage bucket. Defaults to 'strapi-uploads' if not provided.
• directory : string Directory inside your Supabase storage bucket. Optional and dynamic by default.
• privateBucket : boolean use authentication and signed url.
• options : object Additional options for the Supabase client and this provider.

The options parameter can include:

• dynamic_directory : string Create dynamic directories based on the current year and month. Defaults to true if directory is not provided.
• sizeLimit : int or "infinity" The maximum file size for uploads in bytes. Defaults to Infinity.
• expiryMinutes : int The number of minutes until a signed URL expires. Defaults to 60.
• download : boolean or string Whether to force the browser to download the file. This can be a boolean or a filename.
• transform : object Transformation parameters for the file.

See the Supabase documentation for more information on these options.

How to Use

Install the Package

Run the following command in your terminal to install the package:

npm i strapi-provider-upload-supabase

Create a Config File

Create a file named config.js in your root directory with the content provided below:

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-supabase",
      providerOptions: {
        apiUrl: env("SUPABASE_API_URL"),
        apiKey: env("SUPABASE_API_KEY"),
        bucket: env("SUPABASE_BUCKET"),
        directory: env("SUPABASE_DIRECTORY"),
        privateBucket: env.bool("SUPABASE_PRIVATE_BUCKET", false),
        options: {
          dynamic_directory: env.bool("SUPABASE_DYNAMIC_DIRECTORY", true),
          sizeLimit: env.int("SUPABASE_SIZE_LIMIT", Infinity),
          expiryMinutes: env.int("SUPABASE_EXPIRY_MINUTES", 60),
          download: env("SUPABASE_DOWNLOAD", false),
          transform: env.json("SUPABASE_TRANSFORM", {}),
        },
      },
      /* WIP S3 upload/uploadStream and delete options
      actionOptions: {
        upload: {},
        delete: {},
      },
      */
    },
  },
  // ...
});

Create a .env File

Create a .env file in your root directory. Replace <Your Supabase url> and <Your Supabase api key> with the values obtained from the settings/api page of your Supabase project.

SUPABASE_API_URL="<Your Supabase url>"
SUPABASE_API_KEY="<Your Supabase api key>"
SUPABASE_BUCKET="strapi-uploads"
SUPABASE_DIRECTORY="<Set to empty string if SUPABASE_DYNAMIC_DIRECTORY is true>"
SUPABASE_PRIVATE_BUCKET="<Set to true for private bucket>"
SUPABASE_DYNAMIC_DIRECTORY=true
SUPABASE_SIZE_LIMIT=Infinity
SUPABASE_EXPIRY_MINUTES=60
SUPABASE_DOWNLOAD=false
SUPABASE_TRANSFORM={}

Create a Middleware

Create a file named middlewares.js in your root directory.

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

Resources

• MIT License
• Strapi website
• Strapi community on Slack
• Strapi news on Twitter
• Strapi docs about upload
• Supabase website
• Supabase documentation
• Source code for this provider