Strapi Supabase file upload

This was created with intent to be for private use, but I thought someone else might find it useful

A TypeScript-based Supabase Storage upload provider for Strapi 5 CMS.

Features

• ✅ File Organization - Automatic files organization by name under a folder (for example Strapi uploads multi sizes images of the original one using sharp so they can be used inside the CMS like thumbnails, this will add theme all under one folder with the name of the image)
• ✅ Stream & Buffer Support - Handles both stream and buffer uploads
• ✅ File Deletion - Complete file lifecycle management
• ✅ v5 Compatible - Works with latest major Strapi versions

Installation

npm install strapi-supabase-file-upload
# or
yarn add strapi-supabase-file-upload

Configuration

Add the provider configuration to your config/plugins.ts:

export default ({ env }) => ({
  upload: {
    config: {
      provider: 'strapi-supabase-file-upload',
      providerOptions: {
        apiUrl: env('SUPABASE_URL'),
        apiKey: env('SUPABASE_ANON_KEY'),
        bucket: env('SUPABASE_BUCKET'),
        directory: env('SUPABASE_DIRECTORY', ''),
      },
    },
  },
});

Environment Variables

Variable	Description	type
SUPABASE_URL	Your Supabase project URL	Required
SUPABASE_ANON_KEY	Your Supabase anonymous key	Required
SUPABASE_BUCKET	Storage bucket name	Required
SUPABASE_DIRECTORY	Optional directory prefix	Optional

Usage

Basic Setup

1. You need your Supabase credentials
2. Create a storage bucket in Supabase, the bucket needs to be public.
3. Configure the provider as shown above
4. Upload files through Strapi's media library

File Organization

Files are automatically organized by name:

• image.jpg → image/image.jpg
• document.pdf → document/document.pdf

Security Configuration

You need to update Strapi's security configuration to allow images from your Supabase domain. Add the following to your config/middlewares.ts:

export default [
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        directives: {
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'https://your-project.supabase.co', // Replace with your Supabase URL
          ],
        },
      },
    },
  },
  // ... other middlewares
];

Important: Replace https://your-project.supabase.co with your actual Supabase project URL (this also could be a self hosted URL).

Development

# Install dependencies
npm install

# Build the project
npm run build

# Watch for changes
npm run dev

# Format code
npm run format

# Lint code
npm run lint

Future Plans

Maybe make the folder organization optional, only for images, or enabled for all

License

This project is licensed under the MIT License - see the LICENSE file for details.

Tip

If for some reason you don't want to use an NPM package you can simply copy the content of index.ts and the types types.ts. Then follow Strapi docs on how to add a provider to your project.

Support

• 📖 Documentation
• 🐛 Report a Bug or Suggestions