Programmable Media

Upload Widget (video tutorial)

Last updated: Jan-25-2024

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!

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/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 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 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

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: