> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

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

## 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=29 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=59 :player=cld} | Create a basic empty code sandbox project to implement the widget. |

### Include the JavaScript file
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=08 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=16 :player=cld} | 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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=43 :player=cld} | Add an HTML button to the page to display the widget when clicked.|

### Add an event listener
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=02 :player=cld} |  Add an event listener to open the widget when the button is clicked.|

### Run the project
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=12 :player=cld} |  Run the project and upload a file. |

### See the response in the console
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=22 :player=cld} |  See the response to the upload logged to the console. |

### Additional information
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=33 :player=cld} |  You can find out more in the [Upload Widget documentation](upload_widget).|

## Keep learning

> **READING**:
>
> * Check out an [Upload widget code explorer](https://stackblitz.com/edit/github-vt6fzc-wms1nc) that can be easily forked for trying out some sample configuration changes.

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

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

  
    Upload Programmatically
    Use a Cloudinary SDK to upload media assets 
  

    Upload with the CLI
    Apply background removal to images on upload 
  

    Product Gallery
    Embed a Product Gallery in your Web or WordPress site 
  

&nbsp;

&nbsp;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.
&nbsp;