Programmable Media

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

Last updated: Sep-12-2024

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


View the code
You can find the code from this tutorial in GitHub.

Tutorial contents

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

Introduction to the Upload widget

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics

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

Generate Upload Signature
Generate a timestamp and signature for a signed upload
Optimize Videos in Next.js
Optimize delivery of videos in a Next.js app
AI Generative Fill using Next.js
Extend images using generative AI in a Next.js app

 

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: