Skip to content

adham-tech/strapi-supabase-file-upload

Repository files navigation

Strapi Supabase file upload

npm package version License: MIT TypeScript

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.jpgimage/image.jpg
  • document.pdfdocument/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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published