added onSuccessAction prop to Upload Widget

[JoshuaRotimi]

Description

This PR adds an onSuccessAction prop to the CloudUploadWidget component.

Issue Ticket Number

Fixes # Issue 486

Fixes: https://github.com/cloudinary-community/next-cloudinary/issues/486

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Fix or improve the documentation
• [ . ] This change requires a documentation update

[vercel[bot]]

@JoshuaRotimi is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

[colbyfayock]

hey @JoshuaRotimi thanks for putting this together. have a few requests:

• can you add a little more context and usage details to the PR for historical and release notes?

• i tried using this with CldUploadButton and realized that it wasn't set up to pass the props through, can you set this up so that CldUploadButton can use it as well?

• the FormData got me thinking, is ther eanything wrong wiht passing JSON to a Server Action? i tested passing the upload result directly to the onSuccessAction and it seemed to "just work", that would be an easier way to interface with it, though my original assumption was FormData was the intended format for Server Actions

• can you add an example of this working inside of src/tests/nextjs-app so that it runs and can easily be tested?

• i think part of my hope for this was that we could automate the action creation for each callback type. in the code for intsance, the way that the callback function currently is determined is by:

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

if ( typeof widgetEvent === 'string' && typeof props[widgetEvent] === 'function' ) {
  const callback = props[widgetEvent] as CldUploadEventCallback;
  callback(uploadResult, {
    widget: widget.current,
    ...instanceMethods
  });
}

it's not unreasonable to think that we could add onto that by doing osmething like:

const widgetEventAction = typeof widgetEvent === 'string' && `${widgetEvent}Action`;

if ( widgetEventAction && typeof props[widgetEventAction] === 'function' ) {
  const action = props[widgetEventAction] as CldUploadEventAction;
  onSuccessAction(uploadResult);
}

wdyt?

[JoshuaRotimi]

Hello @colbyfayock

Okay, I will add more information about the feature to the PR.

About the JSON/FormData, I think we could switch to JSON, it makes the code more readable without the Object.entries loop, I thought you may have had a definite reason why FormData was the best option.

If we want to automate the action creation the way you stated, we would have to add types for all the other instances like onDisplayChangedAction, onUploadAddedAction and the rest of the CloudWidgetProps actions. is that what we want to do?

Okay, I can add the same functionality to the CloudUploadButton once we have it working correctly for the CloudUploadWidget.