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.
- ✅ 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
npm install strapi-supabase-file-upload
# or
yarn add strapi-supabase-file-upload
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', ''),
},
},
},
});
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 |
- You need your Supabase credentials
- Create a storage bucket in Supabase, the bucket needs to be public.
- Configure the provider as shown above
- Upload files through Strapi's media library
Files are automatically organized by name:
image.jpg
→image/image.jpg
document.pdf
→document/document.pdf
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).
# 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
Maybe make the folder organization optional, only for images, or enabled for all
This project is licensed under the MIT License - see the LICENSE file for details.
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.