Cloudinary Blog

Build Workflows With Cloudinary’s MediaFlows

How to Build Workflows With Cloudinary’s MediaFlows

Many of you who work with the Cloudinary platform have a media-associated workflow for moderation of images, dispatch of notifications with certain data or headers, implementation of activities through add-ons, etc. For most of those cases, Cloudinary would suggest that you take advantage of our webhook notifications and build the workflow with an infrastructure like AWS Lambda. This post describes how to do that with Cloudinary’s MediaFlows a beta product that helps tackle management and operational tasks related to visual media.

Waterfall

What exactly is MediaFlows, you wonder? Here's the official description:

MediaFlows connects Cloudinary’s APIs and services with a visual interface. Developers and marketers can design, deploy, and automate custom media applications and processes in minutes, not days.

Based on drag-and-drop, MediaFlows automates the process of receiving notifications and acting on the changes to your media resources on Cloudinary. The simple use case below typifies a MediaFlows process:

  1. You upload images to Cloudinary.
  2. You move the images to a designated folder with a preset, which also enables manual moderation.
  3. The moderators review the images and approve or reject the media.
  4. Cloudinary automatically moves the approved images to a folder called Approved.

Note
For an in-depth discussion of moderation with Cloudinary, see Nadav Soferman's article.

Below is a tutorial that shows you how to create workflows with Cloudinary’s MediaFlows.

Step 1: Upload Images to Cloudinary

Step 1

First, ensure that uploaded images to Cloudinary land in a certain folder, marked for moderation. Do the following:

  1. Create an upload preset in which to specify a folder called toBeModerated as the target.
  2. Set up this parameter: Auto Moderation: manual.
  3. Name the preset moderate.

Example of an upload preset

You can browse the settings of the preset with the Admin API.

Copy to clipboard
 $ cld admin upload_preset moderate

{
  "name": "moderate",
  "unsigned": false,
  "settings": {
    "overwrite": true,
    "use_filename": true,
    "unique_filename": false,
    "type": "upload",
    "moderation": "manual",
    "folder": "toBeModerated"
  }
}

Step 2: Create the MediaFlow

Now create a MediaFlows account and link it to your Cloudinary account, as follows.

Sign Up With MediaFlows

  1. Go to mediaflows.cloudinary.com/, click the Sign In button, and create a new account with Gmail or GitHub. (For now, those are the only ways for setting up MediaFlows accounts.)
  2. Create a project called Moderation.
  3. Click Connect with Cloudinary to map the MediaFlow account to one on Cloudinary. When prompted, log in to Cloudinary.

Note
If you have multiple subaccounts with Cloudinary, you will be asked to pick one. Because MediaFlows operates at the subaccount level, you cannot enable the same task for multiple subaccounts.

Setting up a new project

Build Your Workflow

You can now use MediaFlows to build a workflow. Follow these two steps:

Setting up a workflow

Set Up Notifications

At the outset, create a basic flow by clicking Start from basic.

Create a basic flow

A dialog box titled Catch Webhook is displayed, denoting that you will be notified of changes in your Cloudinary account. For details, double-click the dialog box. Note down the URL for a later step.

Catch Webhook dialog box

Check for Approval and Move the Image

This step is the core of the MediaFlows setup: You’ll verify if the notification is for an image that has been approved and, if so, have MediaFlows move the image to a folder you specify.

The notification on an approval reads like this:

Copy to clipboard
{
  "asset_id": "9f377ced45037da942fbd1883c27b98d",
  "moderation_status": "approved",
  "url": "http://res.cloudinary.com/dbmataac4/image/upload/v1633466870/toBeModerated/aaa4.jpg",
  "version": 1633466870,
  "moderation_updated_at": "2021-10-05T20:47:55Z",
  "etag": "982dc96b643b044c55a1d8be8c2d0e29",
  "moderation_kind": "manual",
  "secure_url": "https://res.cloudinary.com/dbmataac4/image/upload/v1633466870/toBeModerated/aaa4.jpg",
  "public_id": "toBeModerated/aaa4",
  "notification_type": "moderation",
  "uploaded_at": "2021-10-05T20:47:50Z"
}

The important fields for approval are—

  • public_id, which identifies the asset for moving. Additionally, you can pinpoint the asset with this ID in the folder and check the asset’s details.
  • notification_type, which bears the value moderation in this context.
  • moderation_status, which bears the value approved in this context.

Suppose you want the workflow to proceed with these two tasks:

  • Move the to-be-approved images to a folder named toBeModerated.
  • Move the approved images to a folder named Approved.

To add the logic, do the following:

  1. Add a new block called MediaFlows Function and join Catch Webhook to it, as illustrated in this diagram: MediaFlows

  2. Double-click the MediaFlows block, in which is a text field for JavaScript code. Click the {} button on the bottom left for an option for selecting the dynamic value and passing along the entire JSON format from the previous step. This video shows the process:

Here, the webhook block is passing the information as {{event.data[event.mf.previous_node_id]}} with these specifics:

  • {{event.data[event.mf.previous_node_id].notification_type}}: the notification type.
  • {{event.data[event.mf.previous_node_id].moderation_status}}: the notification status.
  • {{event.data[event.mf.previous_node_id].public_id}}: the public ID of the object, i.e., the image, video, or RAW file.

Now write the logic (see below) in the code template as shown. The code performs three steps:

  1. Check if the notification is for an approval.
  2. Extract the path if the to-be-moderated image is in the folder.
  3. Move the image, assuming that it’s been approved, to the Approved folder.
Copy to clipboard
module.exports = function (event, cloudinary, callback) {
  // Get the notification type and status.
  const notificationType = {{event.data[event.mf.previous_node_id].notification_type}}
  const notificationStatus = {{event.data[event.mf.previous_node_id].moderation_status}}

  // If the asset is in moderation and approved, proceed.
  if (notificationType === 'moderation' && notificationStatus === 'approved') {
    // Get the current public ID.
    const fromId = {{event.data[event.mf.previous_node_id].public_id}}
    // Build a new public ID.
    const pathComponents = fromId.split('/')
    if (pathComponents.length === 2 && pathComponents[0] === 'toBeModerated') {
      const toId = pathComponents[0] + '/' + 'approved' + '/' + pathComponents[1]
      // Issue the rename command.
      cloudinary.v2.uploader.rename(fromId, toId, {
        type: 'upload',
        resource_type: 'image'
      })
        .then(res => {
          // Pass along the status for the next step.
          callback(null, { remame: { status: 'success' } })
        })
        .catch(err => {
          JSON.stringify(err)
        })
    }
  }
}

Note
The above code does not pass along the API credentials from the cloudinary object. When you first link your Cloudinary account, this information is collected by MediaFlows and made available as part of the cloudinary object. Hence, you can build your code like you would with the Node.js SDK.

Send a Confirmation (Optional)

Finally, if you desire, send a message to your systems after an image has been renamed. For example, you can update your database to show that an image has been moderated or monitor the status though your logging and reporting platform. To do so, add a Send HTTP Request element and connect it to the MediaFlows Function element. Double-click the object and specify the values of these two parameters:

  • Request Method: GET or POST.
  • Request URL: Your notification endpoint. For this tutorial, enter the free webhook.site URL.

Watch this video for the steps:

Step 3: Link MediFlows to Your Cloudinary Account

As a final touch, enable your Cloudinary account to send notifications to the MediaFlows endpoint, as shown here:

Step 3

Recall that you received the notification URL after completing the step Set Up Notifications above. Copy that URL., which in this tutorial is https://hooks.mediaflows.cloudinary.com/v1/********, and do the following:

  1. Click the Settings icon in your Cloudinary account and then the Upload tab near the top.
  2. Fill in the text field Notification URL with the URL from MediaFlows.

Notification setting

Test

Finally, test the integration. Follow the steps in the video below.

The Many MediaFlows Capabilities

With MediaFlows, you can customize workflows, sequence operations like image moderation, removal of background, and maybe extraction of tests from images. All those complex tasks can be accomplished only through orchestration with AWS Lambda or other external systems. This chart summarizes the workflow you just created:

Workflow

MediaFlows seamlessly brings this infrastructure closer to you with only minimal coding on your part and no maintenance. What's more, you can share with the Cloudinary community your workflows so that others can leverage and learn from your handiwork.

I look forward to seeing cool, automated creations from you that capitalize on MediaFlows.

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more