https://github.com/ainsleydev/strapi-provider-upload-vercel
A provider for Strapi that uploads media to Vercel's Blob store.
https://github.com/ainsleydev/strapi-provider-upload-vercel
cms strapi typescript uploader vercel
Last synced: 11 months ago
JSON representation
A provider for Strapi that uploads media to Vercel's Blob store.
- Host: GitHub
- URL: https://github.com/ainsleydev/strapi-provider-upload-vercel
- Owner: ainsleydev
- License: mit
- Created: 2023-10-02T19:17:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T19:49:32.000Z (over 2 years ago)
- Last Synced: 2025-07-22T14:20:51.402Z (11 months ago)
- Topics: cms, strapi, typescript, uploader, vercel
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/strapi-provider-upload-vercel
- Size: 296 KB
- Stars: 3
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/strapi-provider-upload-vercel)
[](https://github.com/ainsleydev/audits.com/actions/workflows/lint.yaml?query=main)
[](https://ainsley.dev)
[](https://twitter.com/ainsleydev)
## Strapi Vercel Blob Provider
A provider for Strapi that uploads media to Vercel's Blob store.
## Install
`npm install strapi-provider-upload-vercel`
## Configuration
The plugin settings mimic the SDK parameters defined in
their [documentation](https://vercel.com/docs/storage/vercel-blob/using-blob-sdk)
- `token` A string specifying the token to use when making requests. It defaults to `process.env.BLOB_READ_WRITE_TOKEN`
when deployed on Vercel as explained in Read-write token. You can also pass a client token created with
the `generateClientTokenFromReadWriteToken` method
- `addRandomSuffix` A boolean specifying whether to add a random suffix to the pathname. It defaults to `true`.
- `cacheControlMaxAge` A number in seconds to configure the edge and browser cache. Defaults to one year. See the
caching documentation for more details.
### Provider Configuration
`./config/plugins.js` or `./config/plugins.ts` for TypeScript projects:
```typescript
module.exports = ({ env }) => ({
upload: {
config: {
provider: 'strapi-provider-upload-vercel',
providerOptions: {
token: env('VERCEL_BLOB_TOKEN'),
addRandomSuffix: true,
cacheControlMaxAge: 31536000, // Year in seconds
},
},
},
});
```
## 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 below instead as explained in the middleware configuration documentation.
```typescript
export default [
// ...
{
name: 'strapi::security',
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
'connect-src': ["'self'", 'https:'],
'img-src': [
"'self'",
'data:',
'blob:',
'https://yourbucketname.public.blob.vercel-storage.com',
],
'media-src': [
"'self'",
'data:',
'blob:',
'https://yourbucketname.public.blob.vercel-storage.com',
],
upgradeInsecureRequests: null,
},
},
},
},
];
```
## Open Source
[ainsley.dev](https://ainsley.dev) permits the use of any code found within the repository for use with external
projects.
## Trademark
ainsley.dev and the ainsley.dev logo are either registered trademarks or trademarks of ainsley.dev LTD in the United
Kingdom and/or other countries. All other trademarks are the property of their respective owners.