Integrating Cloudinary with Strapi

ARJUNA’S CODING JOURNAL: I have started writing notes to myself when I code something and it works well, so that I can refer to it later. I figure in blog form they will also help others.

This assumes that you have your Strapi setup. First create an account and sign in on Cloudinary.

Install the strapi-provider-upload-cloudinary on your backend.

npm install @strapi/provider-upload-cloudinary --save

Inside the config folder in Strapi create a plugins.js file

./config/plugins.js

And add the following code in it

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

In your .env file in the root of your project create three variables as follows and populate their values from the data on your cloudinary dashboard.

CLOUDINARY_NAME="xyz"
CLOUDINARY_KEY="abc"
CLOUDINARY_SECRET="def"

Note in many places on the forums and on the npm page of strapi-provider-upload cloudinary the instructions are to install the package as follows that does NOT work: (below is for illustration only do not use it)

npm i strapi-provider-upload-cloudinary

Also the code in the plugins.js file is different and did not work.

However the code and steps suggested in this post worked for me for Strapi V 4.

UPDATE:

One fine day my images and audio files in cloudinary just stopped appearing in Strapi V4. So I did some research and found the following update that fixed the issue. I would make the following change from the get go when integrating cloudinary with strapi:

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 bellow instead as explained in the middleware configuration documentation.

./config/middlewares.js

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

If you have any questions, don’t understand something or are stuck somewhere please feel free to reach out to me Arjuna at brahmaforces@gmail.com. Happy coding!