CldUploadWidget Examples

Signed Uploads

import { CldUploadWidget } from 'next-cloudinary';
 
const [resource, setResource] = useState();
 
<CldUploadWidget
  signatureEndpoint="/api/sign-cloudinary-params"
  onSuccess={(result, { widget }) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
  }}
  onQueuesEnd={(result, { widget }) => {
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick() {
      setResource(undefined);
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

Sources

Controls which sources files can be selected from.

import { CldUploadWidget } from 'next-cloudinary';
 
const [resource, setResource] = useState();
 
<CldUploadWidget
  options={{ sources: ['local', 'url', 'unsplash'] }}
  signatureEndpoint="/api/sign-cloudinary-params"
  onSuccess={(result, { widget }) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
  }}
  onQueuesEnd={(result, { widget }) => {
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick() {
      setResource(undefined);
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

Unsigned Uploads

import { CldUploadWidget } from 'next-cloudinary';
 
const [resource, setResource] = useState();
 
<CldUploadWidget
  uploadPreset="<Your Upload Preset>"
  onSuccess={(result, { widget }) => {
    setResource(result?.info);  // { public_id, secure_url, etc }
  }}
  onQueuesEnd={(result, { widget }) => {
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick() {
      setResource(undefined);
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

Note: all files will eventually be deleted after upload.

Signed Uploads Basic Usage