Use a webhook to remove backgrounds on upload
Last updated: Sep-02-2024
On this page:
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
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
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
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
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
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
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
- See the code example from the tutorial.
- Learn more about webhook notifications.
- Check out the Transformation reference for a listing of all Cloudinary transformations, including syntax details and examples.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Upload Assets in React
Upload assets using the Upload widget in a React AppGravity Crops for Images
Indicate which areas to keep when croppingProduct Gallery in React
Embed the Cloudinary Product Gallery in a React app
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.
✖️