Skip to main content

Upload Provider

Strapi Cloud comes with a local upload provider out of the box. However, it can also be configured to utilize a third-party upload provider, if needed.

Caution

Please be advised that Strapi are unable to provide support for third-party upload providers.

Prerequisites
  • A local Strapi project running on v4.8.2+.
  • Credentials for a third-party upload provider (see Strapi Market).

Configuration​

Configuring a third-party upload provider for use with Strapi Cloud requires 4 steps:

  1. Install the provider plugin in your local Strapi project.
  2. Configure the provider in your local Strapi project.
  3. Configure the Security Middleware in your local Strapi project.
  4. Add environment variables to the Strapi Cloud project.

Install the Provider Plugin​

Using either npm or yarn, install the provider plugin in your local Strapi project as a package dependency by following the instructions in the respective entry for that provider in the Marketplace.

Configure the Provider​

To configure a 3rd-party upload provider in your Strapi project, create or edit the plugins configuration file for your production environment ./config/env/production/plugins.js|ts by adding upload configuration options as follows:


module.exports = ({ env }) => ({
// … some unrelated plugins configuration options
upload: {
   config: {
      // … provider-specific upload configuration options go here
   }
// … some other unrelated plugins configuration options
}
});
Caution

The file structure must match the above path exactly, or the configuration will not be applied to Strapi Cloud.

Each provider will have different configuration settings available. Review the respective entry for that provider in the Marketplace.

Example:

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: 'cloudinary',
      providerOptions: {
        cloud_name: env('CLOUDINARY_NAME'),
        api_key: env('CLOUDINARY_KEY'),
        api_secret: env('CLOUDINARY_SECRET'),
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  // ...
});

Configure the Security Middleware​

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.

To do this in your Strapi project:

  1. Navigate to ./config/middleware.js or ./config/middleware.ts in your Strapi project.
  2. Replace the default strapi::security string with the object provided by the upload provider.

Example:

module.exports = [
  // ...
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'", 
            'data:', 
            'blob:', 
            'market-assets.strapi.io', 
            'res.cloudinary.com'
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'market-assets.strapi.io',
            'res.cloudinary.com',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];
Tip

Before pushing the above changes to GitHub, add environment variables to the Strapi Cloud project to prevent triggering a rebuild and new deployment of the project before the changes are complete.

Strapi Cloud Configuration​

  1. Log into Strapi Cloud and click on the corresponding project on the Projects page.
  2. Click on the Settings tab and choose Variables in the left menu.
  3. Add the required environment variables specific to the upload provider.
  4. Click Save.

Example:

VariableValue
CLOUDINARY_NAMEyour_cloudinary_name
CLOUDINARY_KEYyour_cloudinary_api_key
CLOUDINARY_SECRETyour_cloudinary_secret

Deployment​

To deploy the project and utilize the third-party upload provider, push the changes from earlier. This will trigger a rebuild and new deployment of the Strapi Cloud project.

Once the application finishes building, the project will use the new upload provider.

Custom Provider

If you want to create a custom upload provider, please refer to the Providers documentation in the Developer Documentation.