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.