how to trigger window.onbeforeunload warning only if upload is in progress

Question

Files are uploaded with the following JavaScript function:

function uploadFile(formdata) {
    var xhr = new XMLHttpRequest();

    xhr.upload.addEventListener("progress", progressHandler, false);
    xhr.addEventListener("load", completeHandler, false);
    xhr.addEventListener("error", errorHandler, false);
    xhr.addEventListener("abort", abortHandler, false);
    xhr.open("POST", "upload.php");
    xhr.send(formdata);
}

I'm having hard time figuring out how to implement window.onbeforeunload warning message to fire if user tries to reload or close the browser window while upload is still in progress.

Answer 1

Set a flag - I'll use window but you should use your app scope.

window.uploading = false;

window.onbeforeunload = function () {
    if (window.uploading) {
        return 'You are uploading! CHILL OUT!';
    }
};

function uploadFile(formdata) {
    var xhr = new XMLHttpRequest();

    window.uploading = true;
    xhr.upload.addEventListener("progress", progressHandler, false);
    xhr.addEventListener("load", completeHandler, false); // complete handler sets uploading to false
    xhr.addEventListener("error", errorHandler, false);
    xhr.addEventListener("abort", abortHandler, false);
    xhr.open("POST", "upload.php");
    xhr.send(formdata);
}