Use a webhook to remove backgrounds on upload

Overview

This video tutorial shows you how to use a webhook notification to remove the background from images on upload.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	Easily perform asynchronous image management or transformation tasks by taking advantage of Cloudinary webhook notifications during upload. One example would be to trigger a background removal for an image that is uploaded with a specific tag.

Where to set webhook notification URLs

0:25	You can set your webhook notification URL during the upload, or by setting a global notification URL for uploads from the console settings.

Create Netlify serverless functions for upload and background removal

0:44	You can use Netlify serverless function endpoints to test out your webhook notification URLs, one for upload and one for background removal. The handler function for upload applies a tag as part of the upload process. To start with, the background removal handler logs the response to show what the notification data looks like.

Configure and test your Cloudinary webhook URL

1:23	Retrieve your background removal function endpoint from Netlify and add this notification URL in the Cloudinary webhook settings. Now you can see what happens when that notification is triggered. To test this, you can use a tool like Postman to send an upload request to your Netlify upload endpoint. Take a look at the Netlify logs for the background removal logs to see the notification sent for your upload.

Update function handler for background removal

2:31	You can now update the background removal handler function to retrieve the notification_type and tags from the notification. You can check for the relevant type and tags and then perform an upload using the existing image URL. For the upload, you should define a folder and trigger a background removal. Make sure you have the Cloudinary AI background removal add-on enabled.

Send an upload request and trigger background removal

3:33	Use Postman to send another request to your Netlify upload endpoint. You should be able to navigate to the folder in Cloudinary that you defined for background removals and see the image with the background removed. This is a powerful way to use notification URLs to trigger additional actions with Cloudinary.

You can find the code used in this video tutorial in GitHub.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.