Getting Started with CldUploadWidget

Basic Usage

Unsigned

<CldUploadWidget uploadPreset="next-cloudinary-unsigned">
  {({ open }) => {
    function handleOnClick(e) {
      e.preventDefault();
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

Signed

<CldUploadWidget signatureEndpoint="/api/sign-cloudinary-params">
  {({ open }) => {
    function handleOnClick(e) {
      e.preventDefault();
      open();
    }
    return (
      <button onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

Learn More about CldUploadWidget

• Configuration
• Effects