diff --git a/docs/pages/clduploadbutton/basic-usage.mdx b/docs/pages/clduploadbutton/basic-usage.mdx index b61fbfc7..c9e75d34 100644 --- a/docs/pages/clduploadbutton/basic-usage.mdx +++ b/docs/pages/clduploadbutton/basic-usage.mdx @@ -47,7 +47,7 @@ export const UnsignedUpload = () => { setResource(result?.info); widget.close(); }} - uploadPreset="next-cloudinary-unsigned" + uploadPreset="" />

URL: { resource?.secure_url }

diff --git a/docs/pages/clduploadwidget/basic-usage.mdx b/docs/pages/clduploadwidget/basic-usage.mdx index 1da0004d..b71fb286 100644 --- a/docs/pages/clduploadwidget/basic-usage.mdx +++ b/docs/pages/clduploadwidget/basic-usage.mdx @@ -70,7 +70,7 @@ export const UnsignedUpload = ({ options }) => { return (
{ setResource(result?.info); widget.close(); diff --git a/docs/pages/clduploadwidget/configuration.mdx b/docs/pages/clduploadwidget/configuration.mdx index fd96d860..7788e16b 100644 --- a/docs/pages/clduploadwidget/configuration.mdx +++ b/docs/pages/clduploadwidget/configuration.mdx @@ -158,6 +158,15 @@ uploadPreset="my-upload-preset" ## 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. To allow interaction with +these events, CldUplodWidget provides both "Callback Functions" and "Actions". + +The difference between the Callback Functions and the Actions is the second argument of options +that the Callback Functions receive. While Callback Functions pass in both the results along with the +widget instance and instance methods, Actions only pass along the results in order to support the +Server Actions workflow. + ### Callback Functions + +### Actions + +
({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onBatchCancelledAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onCloseAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onDisplayChangedAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onPublicIdAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onQueuesEndAction', + type: 'function', + example: () => ({`(results, options) => { }`}), + more: () => (More Info) + }, + { + prop: 'onQueuesStartAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onRetryAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onShowCompletedAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onSourceChangedAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onSuccessAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onTagsAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + { + prop: 'onUploadAddedAction', + type: 'function', + example: () => ({`(results) => { }`}), + more: () => (More Info) + }, + ]} +/> + To learn more about the event callbacks and when they trigger, see: https://cloudinary.com/documentation/upload_widget_reference#events **Example** diff --git a/next-cloudinary/src/components/CldUploadButton/CldUploadButton.tsx b/next-cloudinary/src/components/CldUploadButton/CldUploadButton.tsx index c1157df5..19be90fd 100644 --- a/next-cloudinary/src/components/CldUploadButton/CldUploadButton.tsx +++ b/next-cloudinary/src/components/CldUploadButton/CldUploadButton.tsx @@ -14,7 +14,7 @@ const CldUploadButton = ({ onError, onOpen, onUpload, - onAbort, + onAbort, onBatchCancelled, onClose, onDisplayChanged, @@ -30,6 +30,19 @@ const CldUploadButton = ({ options, signatureEndpoint, uploadPreset, + onAbortAction, + onBatchCancelledAction, + onCloseAction, + onDisplayChangedAction, + onPublicIdAction, + onQueuesEndAction, + onQueuesStartAction, + onRetryAction, + onShowCompletedAction, + onSourceChangedAction, + onSuccessAction, + onTagsAction, + onUploadAddedAction, ...props }: CldUploadButtonProps) => { @@ -55,6 +68,19 @@ const CldUploadButton = ({ options={options} signatureEndpoint={signatureEndpoint} uploadPreset={uploadPreset} + onAbortAction={onAbortAction} + onBatchCancelledAction={onBatchCancelledAction} + onCloseAction={onCloseAction} + onDisplayChangedAction={onDisplayChangedAction} + onPublicIdAction={onPublicIdAction} + onQueuesEndAction={onQueuesEndAction} + onQueuesStartAction={onQueuesStartAction} + onRetryAction={onRetryAction} + onShowCompletedAction={onShowCompletedAction} + onSourceChangedAction={onSourceChangedAction} + onSuccessAction={onSuccessAction} + onTagsAction={onTagsAction} + onUploadAddedAction={onUploadAddedAction} > {({ open, isLoading }) => { function handleOnClick(e: React.MouseEvent) { diff --git a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx index 6ad9d8bb..54f35b28 100644 --- a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx +++ b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx @@ -13,6 +13,7 @@ import { import { triggerOnIdle } from '../../lib/util'; import { + CldUploadEventAction, CldUploadEventCallback, CldUploadWidgetCloudinaryInstance, CldUploadWidgetProps, @@ -25,7 +26,7 @@ const WIDGET_WATCHED_EVENTS = [ 'success', ]; -const WIDGET_EVENTS: { [key: string]: string } = { +export const WIDGET_EVENTS: { [key: string]: string } = { 'abort': 'onAbort', 'batch-cancelled': 'onBatchCancelled', 'close': 'onClose', @@ -251,7 +252,7 @@ const CldUploadWidget = ({ } if ( typeof uploadResult?.event === 'string' ) { - if ( WIDGET_WATCHED_EVENTS.includes(uploadResult?.event) ) { + if ( WIDGET_WATCHED_EVENTS.includes(uploadResult?.event as string) ) { setResults(uploadResult); } @@ -264,6 +265,13 @@ const CldUploadWidget = ({ ...instanceMethods }); } + + const widgetEventAction = `${widgetEvent}Action` as keyof typeof props; + + if ( widgetEventAction && typeof props[widgetEventAction] === 'function' ) { + const action = props[widgetEventAction] as CldUploadEventAction; + action(uploadResult); + } } }); } diff --git a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts index e4290f35..1745709b 100644 --- a/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts +++ b/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.types.ts @@ -34,6 +34,19 @@ export interface CldUploadWidgetProps { options?: CloudinaryUploadWidgetOptions; signatureEndpoint?: URL | RequestInfo; uploadPreset?: string; + onAbortAction?: CldUploadEventAction; + onBatchCancelledAction?: CldUploadEventAction; + onCloseAction?: CldUploadEventAction; + onDisplayChangedAction?: CldUploadEventAction; + onPublicIdAction?: CldUploadEventAction; + onQueuesEndAction?: CldUploadEventAction; + onQueuesStartAction?: CldUploadEventAction; + onRetryAction?: CldUploadEventAction; + onShowCompletedAction?: CldUploadEventAction; + onSourceChangedAction?: CldUploadEventAction; + onSuccessAction?: CldUploadEventAction; + onTagsAction?: CldUploadEventAction; + onUploadAddedAction?: CldUploadEventAction; } export type CldUploadWidgetPropsChildren = { @@ -45,6 +58,7 @@ export type CldUploadWidgetPropsChildren = { } & CloudinaryUploadWidgetInstanceMethods; export type CldUploadEventCallback = (results: CloudinaryUploadWidgetResults, widget: CldUploadEventCallbackWidget) => void; +export type CldUploadEventAction = (results: CloudinaryUploadWidgetResults) => void; export type CldUploadEventCallbackNoOptions = (results: CloudinaryUploadWidgetResults, widget: CldUploadWidgetWidgetInstance) => void; export type CldUploadEventCallbackWidgetOnly = (widget: CldUploadWidgetWidgetInstance) => void; export type CldUploadEventCallbackError = (error: CloudinaryUploadWidgetError, widget: CldUploadEventCallbackWidget) => void;