Vercel Blob

ainsley.dev

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

• 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:

1module.exports = ({ env }) => ({
2	upload: {
3		config: {
4			provider: 'strapi-provider-upload-vercel',
5			providerOptions: {
6				token: env('VERCEL_BLOB_TOKEN'),
7				addRandomSuffix: true,
8				cacheControlMaxAge: 31536000, // Year in seconds
9			},
10		},
11	},
12});

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.

1export default [
2	// ...
3	{
4		name: 'strapi::security',
5		config: {
6			contentSecurityPolicy: {
7				useDefaults: true,
8				directives: {
9					'connect-src': ["'self'", 'https:'],
10					'img-src': [
11						"'self'",
12						'data:',
13						'blob:',
14						'https://yourbucketname.public.blob.vercel-storage.com',
15					],
16					'media-src': [
17						"'self'",
18						'data:',
19						'blob:',
20						'https://yourbucketname.public.blob.vercel-storage.com',
21					],
22					upgradeInsecureRequests: null,
23				},
24			},
25		},
26	},
27];

Open Source

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.