Cloudinary integration

Cloudinary is a media management platform for images, videos, and other files. This integration lets you manage Cloudinary assets from WeWeb workflows and generate delivery URLs for media stored in your Cloudinary account.

What this integration supports

• Upload media from backend workflows with Upload Resource
• Generate delivery URLs with Get URL
• List and retrieve assets with Get All Resources and Get Resource by ID
• Update tags, context, and moderation status with Update Resource
• Delete assets with Delete Resource
• Generate temporary private download links with Get Signed URL
• Support signed direct uploads from the interface with:
  • Generate signature for upload
  • Direct Upload file using signature

Setup

1. In the Cloudinary Console, copy your:
   • Cloud Name
   • API Key
   • API Secret
2. In WeWeb, go to Integrations and add Cloudinary.
3. Create a connection and fill in the credentials for each environment you use:
   • Editor
   • Staging
   • Production

How to use Cloudinary in WeWeb

Backend actions

Most Cloudinary actions are used in backend workflows. These are the main ones:

• Upload Resource To send a file to Cloudinary from a URL, base64 data URI, or file path
• Get URL To build a delivery URL for an existing asset
• Get All Resources To list assets
• Get Resource by ID To retrieve one asset
• Update Resource To update tags, context, or moderation status
• Delete Resource To remove an asset
• Get Signed URL To create a temporary private download link
• Generate signature for upload To prepare a signed browser upload

Direct uploads from the interface

This is a two-step flow:

1. Your backend generates the upload signature.
2. Your interface uses that signature to upload the file directly to Cloudinary.

Recommended flow

1. Create an API Endpoint

Create an API Endpoint whose job is to run Generate signature for upload.

And define the upload settings you want to allow, for example:

• Timestamp
• Folder
• Upload Preset
• Public ID
• Tags
• Context
• Moderation
• Notification URL
• Transformation

Then return the values your interface needs, usually:

• The generated signature
• The timestamp
• Any upload parameters you want the interface upload step to reuse

2. Call that API from the interface

In your Interface:

1. Use an Advanced file upload element.
2. Create a workflow on the element using the On change trigger and call the API Endpoint you created in step 1.

3. Upload the file from the interface

In the same Interface workflow, after the API call, run Direct Upload file using signature.

In that action:

• Set File to the file variable from the Advanced file upload component
• Set Signature to the value returned by your API
• Set Timestamp to the value returned by your API
• Pass the same upload settings that were used when generating the signature

That means the values in the interface upload step must match the values used in the backend signature step.

If those values do not match, Cloudinary can reject the upload because the signature no longer matches the upload request.

In plain English

The backend does not upload the file for the user in this flow.

Instead:

1. The backend gives the interface permission to upload by generating a signature.
2. The interface receives that signature from your API.
3. The interface then performs the actual upload with Direct Upload file using signature.

Transformations supported in WeWeb

WeWeb does not expose every Cloudinary transformation option as separate fields. In the Cloudinary actions, the built-in transformation object supports:

• width
• height
• crop
• aspect_ratio
• quality
• raw_transformation

Get URL also supports a separate Format field.

Crop modes available in the action UI

The Cloudinary transformation fields in WeWeb support these crop values:

• scale
• fit
• limit
• mfit
• fill
• lfill
• fill_pad
• pad
• lpad
• mpad
• crop
• thumb
• auto

Use raw transformation for advanced options

If you need a Cloudinary transformation that is not exposed as a dedicated field in WeWeb, use Raw Transformation.

Example:

e_brightness:50/r_max

For the full Cloudinary transformation syntax, see the Cloudinary image transformations docs.

Common pitfalls

Wrong credentials

If Cloud Name, API Key, or API Secret is incorrect, Cloudinary requests will fail. Double-check that each environment is using the correct credentials.

Signed direct upload values do not match

For Direct Upload file using signature, the upload parameters must match the values used in Generate signature for upload. This includes fields like Timestamp, Folder, Upload Preset, Public ID, and transformation settings.

Using the wrong resource type

Several actions ask for Resource Type. Make sure it matches the asset you are working with:

• image
• video
• raw

If you use the wrong type, Cloudinary may not find the asset or may return the wrong URL pattern.

Using the wrong storage type

Some actions also use Storage Type. The supported values are:

• upload
• private
• authenticated

If the stored asset type and the action’s Storage Type do not match, retrieval or deletion can fail.

Direct upload requires an Advanced file upload component

The Direct Upload file using signature action expects a file from an Advanced file upload component. It is not meant for plain text URLs or manual strings.

All actions

This integration provides nine actions.

Action	Description
Upload Resource	Upload a resource to Cloudinary
Get URL	Generate a delivery URL for an asset
Get All Resources	List Cloudinary assets
Get Resource by ID	Retrieve one asset by Public ID
Update Resource	Update tags, context, or moderation status
Delete Resource	Delete an asset
Get Signed URL	Generate a temporary private download URL
Generate signature for upload	Generate a signature for signed browser uploads
Direct Upload file using signature	Upload from the interface with a signed request

Action details

Upload Resource

Use this action to upload a file from a backend workflow.

Main fields:

Field	Description
File	Required. Can be a URL, base64 data URI, or file path
Public ID	Optional custom identifier
Folder	Optional folder path
Tags	Optional list of tags
Resource Type	auto, image, video, or raw
Storage Type	upload, private, or authenticated
Context	Optional key-value metadata
Moderation	Optional moderation setting
Overwrite	Whether to overwrite an existing resource

Get URL

Use this action to build a delivery URL for an existing Cloudinary asset.

Main fields:

Field	Description
Public ID	Required asset identifier
Transformation	Optional transformation object
Secure	Whether to use HTTPS
Resource Type	image, video, or raw
Format	Optional output format

Get All Resources

Use this action to list assets in your Cloudinary account.

Main fields:

Field	Description
Resource Type	image, video, or raw
Max Results	Maximum number of results to return
Next Cursor	Pagination cursor from a previous response
Prefix	Filter by folder path or public_id prefix
Storage Type	upload, private, or authenticated
Include Tags	Include tags in the response
Include Context	Include context metadata in the response
Include Moderations	Include moderation data in the response

Get Resource by ID

Use this action to fetch one asset.

Main fields:

Field	Description
Public ID	Required asset identifier
Resource Type	image, video, or raw

Update Resource

Use this action to update metadata for an existing asset.

Main fields:

Field	Description
Public ID	Required asset identifier
Tags	Replace existing tags
Context	Replace existing context metadata
Resource Type	image, video, or raw
Storage Type	upload, private, or authenticated
Moderation Status	pending, approved, or rejected

Delete Resource

Use this action to delete an existing asset.

Main fields:

Field	Description
Public ID	Required asset identifier
Resource Type	image, video, or raw
Storage Type	upload, private, or authenticated
Invalidate	Invalidate cached CDN copies

Get Signed URL

Use this action to generate a temporary private download link.

Main fields:

Field	Description
Public ID	Required asset identifier
Expires At	Optional Unix timestamp expiry
Attachment	Force download instead of display
Storage Type	upload, private, or authenticated
Resource Type	image, video, or raw
Format	Optional file format

Generate signature for upload

Use this action before a signed direct upload from the interface.

Main fields:

Field	Description
Timestamp	Required Unix timestamp in seconds
Folder	Optional folder path
Upload Preset	Optional upload preset
Public ID	Optional custom identifier
Tags	Optional tags
Eager	Optional eager transformation strings
Context	Optional metadata
Moderation	Optional moderation setting
Notification URL	Optional webhook URL
Transformation	Optional transformation object

The signature is valid for 1 hour from the timestamp used to generate it.

Direct Upload file using signature

Use this action in an Interface workflow with an Advanced file upload component.

Main fields:

Field	Description
File	Required file variable from an Advanced file upload component
Timestamp	Required Unix timestamp; must match the signature step
Signature	Required signature returned by Generate signature for upload
Resource type	image, video, or raw
Folder	Must match the signed value if used
Upload Preset	Must match the signed value if used
Public ID	Must match the signed value if used
Tags	Must match the signed value if used
Eager	Must match the signed value if used
Context	Must match the signed value if used
Moderation	Must match the signed value if used
Notification URL	Must match the signed value if used
Transformation	Must match the signed value if used

FAQs

Can I upload directly from the interface?

Yes. Use Generate signature for upload in a backend workflow or API Endpoint, then call Direct Upload file using signature from the interface with an Advanced file upload component.

Does WeWeb support every Cloudinary transformation field?

No. The built-in transformation object supports a smaller set of fields: width, height, crop, aspect_ratio, quality, and raw_transformation. Use Raw Transformation for more advanced Cloudinary syntax.

Can I list Cloudinary assets with pagination?

Yes. Use Get All Resources and pass Next Cursor from the previous response to fetch the next page.

Can I generate a signed URL for private assets?

Yes. Use Get Signed URL. Make sure the Storage Type and Resource Type match the stored asset.