Upload assets in a Next.js app (video tutorial)
Last updated: Sep-02-2024
On this page:
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
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
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
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
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
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
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
- Read our Upload widget guide and reference, covering every available parameter option.
- Learn about other components in the Next.js SDK.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Generate Upload Signature
Generate a timestamp and signature for a signed uploadOptimize Videos in Next.js
Optimize delivery of videos in a Next.js appAI Generative Fill using Next.js
Extend images using generative AI in a Next.js app
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.
✖️