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.
Create an upload preset
|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.|
Create a code sandbox
|0:59||Create a basic empty code sandbox project to implement the widget.|
Add the widget
Add a button
|1:43||Add an HTML button to the page to display the widget when clicked.|
Add an event listener
|2:02||Add an event listener to open the widget when the button is clicked.|
Run the project
|2:12||Run the project and upload a file.|
See the response in the console
|2:22||See the response to the upload logged to the console.|
|2:33||You can find out more in the Upload Widget documentation.|
- Check out an Upload widget Sandbox that can be easily forked for trying out some sample configuration changes.
- Read our Upload Widget guide and reference, covering every available parameter option.
If you like this, you might also like...
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.