DEV Community

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

How to add Cloudinary to Strapi CMS for Image/Video uploads

Strapi is an open-source Headless CMS.

TL;DR:

The demo source code to this article can be found on GitHub.

To get started, you need to have the following on your computer:

Creating a Strapi Project

To create a new strapi project, run the following:

npx create-strapi-app@latest my-project --quickstart

Enter fullscreen mode Exit fullscreen mode

After a successful installation, Strapi will automatically open a new browser for you to create a local account:

terminal commands

On the browser: http://localhost:1337/admin/auth/register-admin

strapi headless cms

Installing Cloudinary Upload Plugin

To be able to integrate Cloudinary inside your Strapi project, you'll need to install the provider-upload-cloudinary:

https://www.npmjs.com/package/@strapi/provider-upload-cloudinary

To install, run the following inside the root of your project:

npm install @strapi/provider-upload-cloudinary

Enter fullscreen mode Exit fullscreen mode

Inside the ./config folder, create a new file: plugins.js and paste the following:

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: {},
      },
    },
  },
});

Enter fullscreen mode Exit fullscreen mode

Configuring environment variables

At the root of the project folder, locate the .env folder, and add the following:

CLOUDINARY_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=

Enter fullscreen mode Exit fullscreen mode

To find the credentials, log into your Cloudinary account and head over to the account console/dashboard.

Screenshot from 2022-06-11 01-06-34.jpg

You will find your API key and secret on the dashboard, and paste them to your .env file. Save and restart the development server:

npm run develop

Enter fullscreen mode Exit fullscreen mode

On the admin dashboard, navigate to Media Library to test out the integration. Click on the + Add new assets to upload image/images:

Screenshot from 2022-06-11 01-31-20.png

Upon a successful upload, the status code on your terminal will be 200, or if you check your Cloudinary dashboard, you'll see the image uploaded via Strapi.

Screenshot from 2022-06-11 01-39-03.png

Conclusion

The post covers the steps to link Cloudinary with Strapi Headless CMS project.

Top comments (0)