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

Tutorial contents

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.

Include the JavaScript file

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

Add the widget

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

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.

Additional information

2:33	You can find out more in the Upload Widget documentation.

Keep learning

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.

 

🔔Free Newsletter