Fix an IE8 bug with the avatarcropper.

1. Crop an avatar
2. Crop another avatar without reloading
-> Second cropper is 28px x 30px big

2 files changed, 12 insertions, 10 deletions

diff --git a/settings/js/personal.js b/settings/js/personal.js
index e19d4c83500..e6ae612d0fb 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -56,6 +56,7 @@ function updateAvatar () {
 
 function showAvatarCropper() {
 	$cropper = $('#cropper');
+	$cropper.prepend("<img>");
 	$cropperImage = $('#cropper img');
 
 	$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')+'?requesttoken='+oc_requesttoken+'#'+Math.floor(Math.random()*1000));
@@ -77,11 +78,7 @@ function showAvatarCropper() {
 }
 
 function sendCropData() {
-	$cropper = $('#cropper');
-	$('#displayavatar').show();
-	$cropper.hide();
-	$('.jcrop-holder').remove();
-	$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
+	cleanCropper();
 
 	var cropperdata = $('#cropper').data();
 	var data = {
@@ -97,6 +94,15 @@ function saveCoords(c) {
 	$('#cropper').data(c);
 }
 
+function cleanCropper() {
+	$cropper = $('#cropper');
+	$('#displayavatar').show();
+	$cropper.hide();
+	$('.jcrop-holder').remove();
+	$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
+	$('#cropper img').remove();
+}
+
 function avatarResponseHandler(data) {
 	$warning = $('#avatar .warning');
 	$warning.hide();
@@ -228,10 +234,7 @@ $(document).ready(function(){
 	});
 
 	$('#abortcropperbutton').click(function(){
-		$('#displayavatar').show();
-		$('#cropper').hide();
-		$('.jcrop-holder').remove();
-		$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
+		cleanCropper();
 	});
 
 	$('#sendcropperbutton').click(function(){
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 07a7ea0050c..9215115503a 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -94,7 +94,6 @@ if($_['passwordChangeSupported']) {
 			<?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it.')); ?>
 		</div>
 		<div id="cropper" class="hidden">
-			<img>
 			<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Abort')); ?></div>
 			<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div>
 		</div>