Next Cloudinary v6 now available! View Changelog

<CldUploadButton />
Basic Usage

Getting Started with CldUploadButton

The CldUploadButton creates a button element that uses an instance of the Cloudinary Upload Widget (opens in a new tab) to give you an easy way to add upload capabilities to your Next.js app.

The CldUploadButton component wraps the CldUploadWidget component providing a pre-defined UI (a button). The same concepts apply, including having the option of using Signed or Unsigned uploads.

Basic Usage

import { CldUploadButton } from 'next-cloudinary';
<CldUploadButton uploadPreset="<Upload Preset>" />

Using the App Router in Next.js 13+? Add the "use client" directive at the top of your file.


Learn More about CldUploadButton