Last updated: Nov-14-2022
Cloudinary's Upload widget is a complete, interactive user interface that enables your users to upload files from a variety of sources to your website or application. The widget, requiring just a couple lines of code to integrate, eliminates the need to develop in-house interactive media upload capabilities. This tutorial demonstrates how to quickly integrate a basic Upload widget using a code sandbox.
This video is brought to you by Cloudinary's video player - embed your own!
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:29||In the Upload page of the Console Settings, create a new, unsigned upload preset. This preset serves as a form of security override, allowing client-side unsigned uploads. You supply the preset name in your widget creation call.|
|0:59||Create a basic empty code sandbox project to implement the widget.|
|1:43||Add an HTML button to the page to display the widget when clicked.|
|2:02||Add an event listener to open the widget when the button is clicked.|
|2:12||Run the project and upload a file.|
|2:22||See the response to the upload logged to the console.|
|2:33||You can find out more in the Upload Widget documentation.|
Upload ProgrammaticallyUse a Cloudinary SDK to upload media assets
Upload with the CLIApply background removal to images on upload
Product GalleryEmbed a Product Gallery in your Web or WordPress site
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.