Function can be bypassed by page refresh

Question

I've searched for hours to get a solution for my problem. But I have to ask the community now. I've programmed an ajax file upload system. Here is the Javascript:

var handleUpload = function(event) {
    event.preventDefault();
    event.stopPropagation();

    var fileInput = document.getElementById('fileAvatar');
    var data = new FormData();
    data.append('ajax', true);
    data.append('avatar', fileInput.files[0]);
    var request = new XMLHttpRequest();

    request.upload.addEventListener('error', function(event) {
        alert('Upload Failed');
    });

    request.addEventListener('readystatechange',function(event) {
        if (this.readyState == 4) {
            if (this.status == 200) {
                var uploaded = this.response.split("|");

                // DO SOME ERROR HANDLING IN THIS AREA              

                if (uploaded[0] == 'upload_success') {

                    $('.avatarCropImage').attr('src','<?php echo USERFILES;?><?php echo $log_username; ?>/' + uploaded[1]);
                    $('.cropInput').attr('type',uploaded[2]);
                    showPopup('cropAvatar');

                    /************************/
                    /***** Problem Area *****/
                    /************************/

                } else {
                    showPopup('errorNotification');
                    _('popupError').innerHTML = 'Something went wrong. Please try again.';
                }
            } else {
                alert('Error' + this.status);
            }
        }
    });
    request.open('POST','<?php echo $url_data; ?>');
    request.setRequestHeader('Cashe-Control', 'no-cashe');
    request.send(data);
}

window.addEventListener('load', function() {
    var submit = document.getElementById('submitAvatar');
    submit.addEventListener('click',handleUpload);
});

The file upload works fine and as you can see, after the file was uploaded I push the uploaded image into a popup called cropAvatar.

Then the user has to crop an area to get a thumbnail of his avatar. If he selects an area and clicks on the Crop-Button, the Crop-Function will be run:

function cropImage() {
    var top = $('.cropBox').position().top - 3;
    var left = $('.cropBox').position().left - 3;
    var width = $('.cropBox').width();
    var height = $('.cropBox').height();
    var src = $('.avatarCropImage').attr('src');
    var type = $('.cropInput').attr('type');

    var ajax = ajaxObj("POST", "<?php echo $url_data; ?>");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            if (ajax.responseText == "") {
                $('.buttonClose').click();
                $('.avatarImage').attr('src',src);
                $('.cropAvatar').css('display','none');
            } else {
        alert(ajax.responseText);
        showPopup('errorNotification');
        _('popupError').innerHTML = 'Something went wrong. Please try again.';
        }
    }
    }
    ajax.send("action=avatar&top="+top+"&left="+left+"&width="+width+"&height="+height+"&src="+src+"&type="+type);
}

This also works pretty well. The problem now is that the user can bypass the Crop-Function when he reloads the page. Do you have any solution for that?

I also tried to fix this problem by entering the following code into the Problem Area:

// cropImage() is the Crop-Function
window.unload = cropImage();

Thanks for helping.

Answer 1

Don't save the avatar until the user has done the cropping step.

Leave the file as a dangling temp file until the user has completed the whole upload wizard.

---

I can come up with a similar scenario:

When you paste a link into a Facebook post, Facebook will give you a thumbnail image for the link. What if you then cancel the post? Where does the thumbnail go, or actually, where has it been since there was no post yet? It's all in a temporary structure until you commit, ie. complete the post.