Hello Everyone!
I am fairly new to the world of software development, and especially JS. I’m building a paint app. When the user tries to the page, I have preventDefault() run beforeunload.
If the user clicks cancel, in the dialog, then a swal message pops up. It gives the user three options. “Save” “Don’t Save” and “Cancel” when the user clicks “Save” I have a download dialog open. When the download finishes, I want to display another swal that tells the user their file is saved. A lot of different forum posts I read from several years ago say it’s impossible to tell when a file is done download without server side code (I don’t know a thing about server side). But all these posts are so old, I can’t help wondering if something’s changed, possibly with the coming of ES6 or 7.
Does anybody have any non-server side solutions? Here’s my code:
Java Script
window.addEventListener('beforeunload', (event) => {
const blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
if (canvas.toDataURL() !== blank.toDataURL()) {
event.preventDefault();
Swal.fire({
title: "Do you want to save the changes?",
showDenyButton: true,
showCancelButton: true,
confirmButtonText: "Save",
denyButtonText: `Don't save`
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
const link = document.createElement("a");
link.download = `Untitled${Date.now()}.jpg`;
link.href = canvas.toDataURL();
link.click().then((result) => {
Swal.fire("Saved!", "", "success");
})
} else if (result.isDenied) {
Swal.fire("Changes are not saved", "", "info");
}
});
}
});
Thanks For Helping!