khushi2502
commented
11 months ago 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 (
); };
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
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 https://github.com/colbyfayock/next-cloudinary/pull/255