Upload assets in a Next.js app (video tutorial)

Overview

Add asset upload capabilities to your Next.js application using the Cloudinary Upload widget. Learn how to install and configure the Upload widget, for both unsigned and signed uploads.

Video tutorial

Tutorial contents

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

Introduction to the Upload widget

0:00	Cloudinary has many ways to upload files to your product environment, enabling you to take advantage of Cloudinary's extensive features and capabilities. In a Next.js app you can use the CldUploadWidget component of the community-developed Cloudinary Next.js SDK as a quick and easy way to provide a full upload experience.

Add an unsigned Upload widget to your Next.js app

1:02	Start with a Next.js app with the Cloudinary Next.js SDK already installed and configured. Import CldUploadWidget from next-cloudinary, then copy and paste the code for the unsigned Upload widget. Make sure you have the 'use client'; directive at the top of your code.

Create an upload preset

1:37	In your Cloudinary Console, navigate to Settings > Upload > Upload presets to create a new unsigned upload preset. Give the preset a name and make sure to change the Signing mode to unsigned, then save the upload preset. Add the name of the upload preset to your code.

Customize the Upload widget button

2:29	You can customize the Upload widget button by adding some CSS classes to the button component.

Add a signed Upload widget to your Next.js app

2:40	For a more secure upload, use a signed Upload widget. Use the Node.js SDK to generate a signature for upload. Create a route handler in your Next.js app to call the api_sign_request method of the Node.js SDK. Replace the uploadPreset prop with the signatureEndpoint prop, set to the endpoint (in this case "/api/sign-image").

Customize the Upload widget

3:52	There are many ways to customize the Upload widget, for example by limiting the sources of the files to upload. Check out all the options in the docs.

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.