Integrating Strapi with Cloudinary for Media Handling

Introduction

Using Cloudinary as a media provider offloads storage and delivers optimized, transformed media via CDN. This guide configures Strapi with Cloudinary.

Prerequisites

• Strapi v5 project

• Cloudinary account

• cloudinary npm package

Step 1: Install Cloudinary Provider

npm install @strapi/provider-upload-cloudinary

Step 2: Configure Provider

Update config/plugins.js:

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

Set environment variables in .env:

CLOUDINARY_NAME=my-cloud-name
CLOUDINARY_KEY=my-api-key
CLOUDINARY_SECRET=my-api-secret

Step 3: Restart Strapi

npm run develop

Step 4: Upload and Fetch Media

• Upload media via Strapi Admin or API.

• URLs will point to Cloudinary CDN, e.g., res.cloudinary.com/.../image/upload/v.../filename.jpg.

Step 5: Apply Transformations

Use query parameters:

<img
  src="https://res.cloudinary.com/my-cloud-name/image/upload/w_300,h_200,c_fill/v1615551234/sample.jpg"
/>

Summary

Integrating Cloudinary with Strapi centralizes media storage, offloads bandwidth, and enables on-the-fly transformations. Use CDN URLs for fast, optimized delivery.