[Feature] CldUploadWidget - Callbacks as Actions

[colbyfayock]

Feature Request

Is your feature request related to a problem? Please describe.

<CldUploadWidget onSuccessAction={successAction}

Would allow for easier interaction between the server and client components

[JoshuaRotimi]

@colbyfayock could you share more information about how this should work? Also, does onSuccessAction replace the onUpload method ?

[colbyfayock]

@JoshuaRotimi apologies for the short Issue, i was planning on handling this but haven't gotten around to it

when playing with this before, the way i had imagined this working is that there's a new prop onSuccessAction (separately maintained from onSuccess (onUpload was deprecated)

this prop would take a Server Action, that would be treated as a callback, similar to onSuccess

for instance:

// actions.ts

async function storeImage(formData: FormData) {
  // Grab resource and save references in a database
}

// mycomponent.tsx

<CldUploadWidget onSuccessAction={storeImage} />

Inside of the CldUploadWidget component, we would need to invoke the action like an async function:

// CldUploadWidget.tsx

const { onSuccessAction } = props;

const formData = new FormData();

formData.append('resource', upload);

await onSuccessAction(formData);

This would give more flexibilty to use the upload widget from a server component

Considerations:

• Should we add an action for every callback? currently events are managed in WIDGET_EVENTS, so perhaps in the the loop that runs through each one, in addition to the event, can add the extra Action event

const widgetEvent = WIDGET_EVENTS[uploadResult.event] as keyof typeof props;

if ( props[widgetEvent] === 'function' )
if ( props[`${widgetEvent}Action`] === 'function' )

• How should we send the resource as form data to the action? should we bundle up the entire uploadResult as a JSON object? that may make sense, should each key of uploadResult get it's own form data item? formdata values can't be an object afaik

formData.append('upload', JSON.stringify(uploadResult))

// vs

Object.entries(uploadResult).forEach(([key, value]) => {
  formData.append(key, JSON.stringify(value))
})

I lean towards the latter to avoid one huge string but i'm open to suggestions and ideas around this. perhaps we can see if there's precedent for how others have handled this

what do you thikn?

[JoshuaRotimi]

Okay, thank you for the clarification. I think I have an understanding of what you mean now. A few questions:

1. would we create an async function inside the createWidget function to handle the onSuccessAction function or make the createWidget function itself an async function?
2. does this mean the component would accept and use either the onSuccess OR the onSuccessAction prop and not both? I think the Object.entries approach might be the better option

[colbyfayock]

1. the onSuccessAction is the async function. i'm thinking that we don't necessarily need to await the onSuccessAction callback inside of createWidget as we're not depending on it, os it can fire off asynchronously as the callback, similar to the original one. onSuccessAction being async shouldnt change things (and technically might not need to be async itself?)

2. it should accept both onSuccess AND onSuccessAction as they're both valid use cases, onSuccessAction being specific to server actions. they both have different argument signatures

[JoshuaRotimi]

Okay that makes sense. Let me give it a try, you can assign it to me.

[colbyfayock]

sounds great!