Next Cloudinary v6 now available! View Changelog

Guides
Uploading Images & Videos

Uploading Images & Videos

Use the CldUploadButton or CldUploadWidget components to add upload capabilities to your app.

The components utilize the Cloudinary Upload Widget (opens in a new tab), built for Next.js.

Example

import { CldUploadButton } from 'next-cloudinary';
 
const [resource, setResource] = useState();
 
<CldUploadButton
  className={styles.button}
  onUpload={(error, result, widget) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
    widget.close();
  }}
  signatureEndpoint="/api/sign-cloudinary-params"
  uploadPreset="next-cloudinary-signed"
>
  Upload to Cloudinary
</CldUploadButton>

Learn More