Configuring CldUploadWidget

Basic Props

Prop	Type	Example
signatureEndpoint	string	/api/sign-cloudinary-params.js	More Info
uploadPreset	string	my-upload-preset	More Info

signatureEndpoint

An API endpoint used to sign the parameters generated during upload.

signatureEndpoint="/api/sign-cloudinary-params"

Find an example of generating a signature on the Signed Uploads page.

Or learn more about generating signatures on the Cloudinary docs.

uploadPreset

uploadPreset="my-upload-preset"

Learn more about upload presets on the Cloudinary docs.

Events

Upload Widget events allow you to tap into different points of the upload lifecycle including when an upload has completed, but also when it starts the queue and more.

CldUploadWidget supports all native events emitted from the Upload Widget the component wraps. The full list of events can be found on the Cloudinary Upload Widget API reference.

In order to trigger a function based on an event, an event listener can be attached to the widget.

---
import { CldUploadWidget } from 'astro-cloudinary';
---
<CldUploadWidget
  id="upload-events"
  uploadPreset="<Your UploadPreset>"
/>

<script>
const widget = document.querySelector('#upload-events');

if ( widget ) {
  widget.addEventListener('clduploadwidget:success', ((e: CustomEvent<{ detail: object }>) => {
    console.log('clduploadwidget:success', e.detail);
  }) as EventListener);
}
</script>

• Expand Snippet
• Collapse Snippet

All events follow the same pattern:

clduploadwidget:<event>

Where <event> is based on the name of the event found in the Cloudinary documentation.

The Custom Event will include a details property which allows for access of the event information including results, such as the uploaded resource when listening to the success event.

Name	Type	Description
event	string	Event name.
info	string | object | undefined	Result or details of the event.
UploadWidget	CloudinaryUploadWidget	Upload Widget instance.

Advanced

Configuration

Prop	Type	Default	Example
config	object	-	{ url: { cloudName: 'spacejelly' } }	More Info
options	object		{encryption: {...}}	More Info

config

Allows configuration for the Cloudinary environment.

Examples

config={{
  cloud: {
    cloudName: '<Your Cloud Name>',
    apiKey: '<Your API Key>'
  }
}}

options

Parameters used to customize and configure the Upload Widget instance. These options are passed in directly to the Upload Widget, exposing all available parameters through the options object.

options={{
  sources: ['local', 'url', 'unsplash'],
  multiple: true,
  maxFiles: 5
}}

Learn more about Upload Widget parameters on the Cloudinary docs.