Configuring CldUploadWidget

Basic Props

Prop	Type	Example
signatureEndpoint	string	/api/sign-cloudinary-params	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.

Events are passed in as props rather than using the on:event syntax:

Event	Type
onAbort	(results, options) => void	More Info
onBatchCancelled	(results, options) => void	More Info
onClose	(results, options) => void	More Info
onDisplayChanged	(results, options) => void	More Info
onError	(error, options) => void
onOpen	(widget) => void
onPublicId	(results, options) => void	More Info
onQueuesEnd	(results, options) => void	More Info
onQueuesStart	(results, options) => void	More Info
onRetry	(results, options) => void	More Info
onShowCompleted	(results, options) => void	More Info
onSourceChanged	(results, options) => void	More Info
onSuccess	(results, options) => void	More Info
onTags	(results, options) => void	More Info
onUploadAdded	(results, options) => void	More Info
onUpload	(results, widget) => void	Deprecated, use onSuccess

The options object contains the widget and all instance methods.

Slot Props

Prop	Type	Description
isLoading	boolean	Designates whether the upload widget is loading and initializing.
cloudinary	Cloudinary	The Cloudinary instance which creates and manages the Widget instance.
widget	Widget	The widget instance attached to the current component.
Instance Methods	n/a	See Instance Methods below

Instance Methods

Prop	Type	Description
close	function	Closes and resets the widget to its initial state without removing it from memory.
show	function	Renders a previously hidden widget.
open	function	Renders an existing widget currently in memory, but that is not currently displayed.
destroy	function	Hides a previously rendered widget while retaining its current state in memory.
hide	function	Closes the widget and completely removes it from the DOM. Returns a promise that resolves upon cleanup completion.
minimize	function	Minimizes the widget.
update	function	Updates a widget currently in memory with new options.
isDestroyed	function	Returns whether the destroy method was called on this instance.
isMinimized	function	Returns whether the widget is currently minimized.
isShowing	function	Returns whether the widget is currently visible.

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.