Programmable Media

Use a webhook to remove backgrounds on upload

Last updated: Sep-12-2024

Overview

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

Video tutorial


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

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

Introduction

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics

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

Upload Assets in React
Upload assets using the Upload widget in a React App
Gravity Crops for Images
Indicate which areas to keep when cropping
Product Gallery in React
Embed the Cloudinary Product Gallery in a React app

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: