Using the Cloudinary Upload Widget I can succesfully upload images to cloudinary and use the response to store the image data to a separate database. (Node.js + Javascript)
What I want to achieve is a page redirect after succesful upload when user clicks on “Done” in the widget. The issue I’m facing is figuring out which result event can be used to trigger the page redirect? The widget sends same event ‘close’ when ‘Done’ is clicked and when widget is closed using the ‘X’ in top right. How to distinguish between ‘Done’ and ‘X’?
My test case is as follows
- Open widget
- Upload image(s) using widget
- Click Done in widget
- Page is redirected
In short, if user opens the widget and immediately closes it using ‘X’, my page redirect will trigger. Cannot use the upload ‘success’ event to redirect because when multiple images are being uploaded this event is sent for each upload.
close event on ‘X’
success and close events
This script is too long to paste here in full and making it reproduceable means exposing my cloudinary accound credentials.
From Cloudinary documentation, the syntax for opening the widget is
cloudinary.openUploadWidget(options, resultCallback)
resultCallback is an optional function called for event handling. The callback method has the following signature function(error, result) where error is either null if successful or an error message if there was a failure, while result is a JSON object detailing the triggered event.
Below is my beginner attemps to identify which result.event I can use.
The page redirect is initiated by changing html element data-set dataDivResults.dataset.uploadResult = 'success';. A seperate script with an observer monitors for changes to this html element attribute.
// result is a JSON object detailing the triggered event.
// error is either null if successful or an error message if there was a failure
// See https://cloudinary.com/documentation/upload_widget#upload_widget_events
// and https://cloudinary.com/documentation/upload_widget_reference#events
const processResults = async (error, result) => {
if (error) {
console.log(error);
}
if (!error && result && result.event === 'success') {
// Send the result object to backend to save image data in database
// When multiple images are uploaded, this event happens for each image
const serverResponseData = await sendImageDataToServer(result); // returns {success: true or false}
// ...
}
if (error && result && result.event === 'close') {
// do not redirect. Reload page.
}
if (!error && result && result.event == 'close') {
// In a separate script, observer is listening for data-set attribute changes to dataDivResults
// When the attribute changes, the observer will redirect to the album page
const dataDivResults = document.getElementById('dataDivResults');
dataDivResults.dataset.uploadResult = 'success';
}
};
const launchWidget = () => {
console.log('FE => Launching widget');
const myWidget = window.cloudinary.createUploadWidget(options, processResults);
myWidget.open();
};
