Cloudinary Media Library

Strapi Cloudinary Media Library Custom Field

Install now

Strapi Cloudinary Media Library Plugin

Strapi Custom Field with Cloudinary Media Library feature

A Strapi plugin that adds a custom field for selecting Cloudinary media assets using Cloudinary's official Media Library widget.

✨ Features

Seamlessly integrate Cloudinary Media Library into Strapi admin panel
Select and manage media assets directly from Cloudinary
Custom field for Cloudinary media assets
Support for images, videos and other media types
Automatically includes Cloudinary media URLs and metadata in Strapi API responses (when using the Cloudinary media field)

📋 Requirements

Strapi v5.0.0 or later
Node.js 18+
Cloudinary Bucket

📦 Installation

npm install @strapi-community/cloudinary-media-library@latest
# or
yarn add @strapi-community/cloudinary-media-library@latest

🔐 Getting Cloudinary Credentials

To retrieve your Cloudinary credentials:

Go to https://cloudinary.com/console
Select Settings > API keys
Copy your cloud name and API key.

You don’t need the API secret for this integration — only cloud name and API key.

⚙️ Setting up Configuration File

Your plugin settings should go in config/plugins.ts. Here’s an example:

1export default {
2  'cloudinary-media-library': {
3    enabled: true,
4    config: {
5      cloudName: 'your-cloud-name',
6      apiKey: 'your-api-key',
7      encryptionKey: '32 chars encryption key'
8    },
9  },
10};

Additionaly you can set up plugin config through Settings page in the Admin panel. Please note that this configuration will overwrite config/plugin.ts

Plugin Configuration

These options are passed directly to the Cloudinary Media Library widget.

Setting up `strapi::security` middlewares to avoid CSP blocking Cloudinary

When using Cloudinary's Media Library Plugin, modern browsers enforce Content Security Policy (CSP) rules. These policies prevent scripts, images, frames, and other resources from loading if they originate from domains not explicitly allowed — which will cause the Cloudinary widget to break.

To fix this, you need to explicitly allow Cloudinary domains in Strapi's security middleware configuration.

Edit ./config/middlewares.js

1export default [
2  'strapi::logger',
3  'strapi::errors',
4  {
5    name: 'strapi::security',
6    config: {
7      contentSecurityPolicy: {
8        useDefaults: true,
9        directives: {
10          'connect-src': ["'self'", 'https:'],
11          'img-src': [
12            "'self'",
13            'data:',
14            'blob:',
15            'https://market-assets.strapi.io',
16            'https://console.cloudinary.com',
17            'https://res.cloudinary.com',
18          ],
19          'script-src': [
20            "'self'",
21            'example.com',
22            'https://media-library.cloudinary.com',
23            'https://upload-widget.cloudinary.com',
24            'https://console.cloudinary.com',
25          ],
26          'media-src': ["'self'", 'data:', 'blob:', 'https://console.cloudinary.com'],
27          'frame-src': [
28            "'self'",
29            'https://media-library.cloudinary.com',
30            'https://upload-widget.cloudinary.com',
31            'https://console.cloudinary.com',
32          ],
33          upgradeInsecureRequests: null,
34        },
35      },
36    },
37  },
38  'strapi::cors',
39  'strapi::poweredBy',
40  'strapi::query',
41  'strapi::body',
42  'strapi::session',
43  'strapi::favicon',
44  'strapi::public',
45];

🔐 Managing Permissions

The Cloudinary Media Library plugin supports two types of role-based permissions to control access to its features:

Permission	Description
`Read`	Allows the user to view Cloudinary credentials in the Settings page and upload media using the Cloudinary input field.
`Settings`	Grants full access to modify Cloudinary configuration (cloud name and API key).