Image & Video APIs
Menu

Upload Widget (video tutorial)

Last updated: Nov-24-2025

Overview

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.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

Tutorial contents

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

Create an upload preset

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

Create a code sandbox

Jump to this spot in the video 0:59 Create a basic empty code sandbox project to implement the widget.

Include the JavaScript file

Jump to this spot in the video 1:08 Include the cloudinary widget JavaScript file (https://upload-widget.cloudinary.com/latest/global/all.js) in your web page.

Add the widget

Jump to this spot in the video 1:16 Use the createUploadWidget method to create your widget, specifying the upload preset that you created in the first step, your cloud name, and some additional widget options.

Add a button

Jump to this spot in the video 1:43 Add an HTML button to the page to display the widget when clicked.

Add an event listener

Jump to this spot in the video 2:02 Add an event listener to open the widget when the button is clicked.

Run the project

Jump to this spot in the video 2:12 Run the project and upload a file.

See the response in the console

Jump to this spot in the video 2:22 See the response to the upload logged to the console.

Additional information

Jump to this spot in the video 2:33 You can find out more in the Upload Widget documentation.

Keep learning

Related topics
  • Check out an Upload widget code explorer that can be easily forked for trying out some sample configuration changes.
  • Read our Upload Widget guide and reference, covering every available parameter option.
  • Take a look at the User-generated content guide to see all the features you can take advantage of when uploading images and videos to display on your site.

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.

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: