> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Upload Widget (video tutorial)



## 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.
{videoTranscript:publicId=training/uw-video_tut}

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.### Create an upload preset
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Create a basic empty code sandbox project to implement the widget. |

### Include the JavaScript file
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Include the cloudinary widget JavaScript file (`https://upload-widget.cloudinary.com/latest/global/all.js`) in your web page.|

### Add the widget
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | Add an HTML button to the page to display the widget when clicked.|

### Add an event listener
{table:class=tutorial-bullets}|  | 
| --- | --- |
| |  Add an event listener to open the widget when the button is clicked.|

### Run the project
{table:class=tutorial-bullets}|  | 
| --- | --- |
| |  Run the project and upload a file. |

### See the response in the console
{table:class=tutorial-bullets}|  | 
| --- | --- |
| |  See the response to the upload logged to the console. |

### Additional information
{table:class=tutorial-bullets}|  | 
| --- | --- |
| |  You can find out more in the [Upload Widget documentation](upload_widget).|

## Keep learning

> **READING**:
>
> * Read our Upload Widget [guide](upload_widget) and [reference](upload_widget_reference), covering every available parameter option.

> * Take a look at the [User-generated content guide](user_generated_content) to see all the features you can take advantage of when uploading images and videos to display on your site.

> **Try it in a Sample App :custom-icon='https://cloudinary-res.cloudinary.com/image/upload/v1778586152/docsite/brand-assets/github.svg' :invert-icon**:
>
> Check out an [Upload widget sample app](https://github.com/cloudinary-devs/cloudinary-upload-widget-js) that you can use to try out some sample configuration changes.

> * Enjoy interactive learning? Check out more [sample apps](code_explorers)!

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

[Upload Programmatically](upload_programmatically_tutorial)

Use a Cloudinary SDK to upload media assets

[Upload with the CLI](upload_with_the_cli_tutorial)

Apply background removal to images on upload

[Product Gallery](product_gallery_tutorial)

Embed 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.