CldUploadWidget

The CldUploadWidget creates a new instance of the Cloudinary Upload Widget giving you an easy way to add upload capabilities to your Nuxt app.

Basic Usage

The CldUploadWidget will not render any UI by default. It will instead only render what's returned from the slot (see more below).

There are two options when using the CldUploadWidget: signed and unsigned. These options allow you to control the amount of security and restrictions you place on uploads.

Unsigned

To give unsigned access for upload, provide an upload preset as part of the component configuration.

Use the following to generate an unsigned upload widget:

<CldUploadWidget v-slot="{ open }" uploadPreset="nuxt-cloudinary-unsigned">
  <button type="button" @click="open">Upload an Image</button>
</CldUploadWidget>

Signed

Signing upload requests requires passing in an endpoint to the component.

You can do this by creating a serverless function that reads the parameters as the body and returns an object with the signature.

Use the following to generate an signed upload widget:

<CldUploadWidget
  v-slot="{ open }"
  signatureEndpoint="<API Endpoint (ex: /api/sign-cloudinary-params)>"
>
  <button type="button" @click="open">Upload an Image</button>
</CldUploadWidget>

Here's an example of how you could process the signature in an API endpoint that signs a request:

import { v2 as cloudinary } from "cloudinary";

export default eventHandler(async (event) => {
  const signature = cloudinary.utils.api_sign_request(
    body.paramsToSign,
    process.env.CLOUDINARY_API_SECRET
  );

  return { signature };
});

To use the above, create a Node-based API route, add the snippet, and use that endpoint as the signatureEndpoint prop.

General Props

Event Props

To learn more about the event callbacks and when they trigger, see: https://cloudinary.com/documentation/upload_widget_reference#events

Callback Options

Most of the callbacks provide a set of options that give access to the widget instance and allow more interaction.