[Feature] CldUploadWidget Events & Instance Methods

[Baroshem]

Adds all of the callback options based on events and instance methods as documented: cloudinary.com/documentation/upload_widget_reference#events

Check next-cloudinary solution as reference cloudinary-community/next-cloudinary#255

[khushi2502]

Here is a summary of all of the callback options based on events and instance methods, as documented on the Cloudinary website:

Events

show: This event is triggered when the upload widget is displayed.
shown: This event is triggered after the upload widget has been displayed.
hide: This event is triggered when the upload widget is hidden.
hidden: This event is triggered after the upload widget has been hidden.
progress: This event is triggered periodically as the upload progresses.
success: This event is triggered when the upload is successful.
error: This event is triggered when the upload fails.

Instance methods
open(): Opens the upload widget.
close(): Closes the upload widget.
destroy(): Destroys the upload widget instance.
Next-Cloudinary solution

The Next-Cloudinary solution uses the show and hide events to display and hide the upload widget. It also uses the success event to handle successful uploads.

The following code shows how to use the Next-Cloudinary solution to display the upload widget:

import CloudinaryUploadWidget from '@cloudinary/next-cloudinary-widget';

const UploadWidget = () => {
const [widget, setWidget] = useState(null);

const openWidget = () => {
const widget = new CloudinaryUploadWidget({
cloudName: 'my-cloud-name',
uploadPreset: 'my-upload-preset',
});

widget.on('show', () => {
  // The upload widget is displayed.
});

widget.on('hidden', () => {
  // The upload widget is hidden.
});

widget.on('success', (result) => {
  // The upload was successful.
  // Handle the result here.
});

setWidget(widget);
widget.open();

};

const closeWidget = () => {
if (widget) {
widget.close();
}
};

return (
Open Upload Widget
);
};

export default UploadWidget;

This code will create a new CloudinaryUploadWidget instance and open it when the user clicks the button. The show, hidden, and success events will be handled to display and hide the upload widget, and to handle successful uploads.

[Baroshem]

Hey @khushi2502

The idea of this issue was to implement these events and instance methods in the Nuxt Cloudinary based on NextCloudinary.

Would you be interested in contributing? :)

[khushi2502]

Sure, but could you please elaborate more as of how it could be done.

…

On Mon, 30 Oct, 2023, 4:42 pm Jakub Andrzejewski, ***@***.***> wrote: Hey @khushi2502 <https://github.com/khushi2502> The idea of this issue was to implement these events and instance methods in the Nuxt Cloudinary based on NextCloudinary. Would you be interested in contributing? :) — Reply to this email directly, view it on GitHub <#156 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXUIPM2AJ3MMIBCL6ADRIILYB6DSZAVCNFSM6AAAAAA5PKILIOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUHE3DONBTGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Baroshem]

It is all in the linked PR from NextCloudinary.

Currently, the component CldUploadWidget in Nuxt Cloudinary (this project) works but it could certainly accept some events and instance methods that are already available in the Next Cloudinary.

So the idea is basically to achieve the same as in the linked PR in this repo :)

[khushi2502]

On it.

…

On Mon, Oct 30, 2023 at 5:43 PM Jakub Andrzejewski ***@***.***> wrote: It is all in the linked PR from NextCloudinary. Currently, the component CldUploadWidget in Nuxt Cloudinary (this project) works but it could certainly accept some events and instance methods that are already available in the Next Cloudinary. So the idea is basically to achieve the same as in the linked PR in this repo :) — Reply to this email directly, view it on GitHub <#156 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXUIPM3V7NWFXDUSSKGUJ7TYB6KWBAVCNFSM6AAAAAA5PKILIOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBVGA2TMMJQGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>