show preview for uploading image files on conflict

core/js/oc-dialogs.js

@@ -220,6 +220,55 @@ var OCdialogs = {
 	*/
 	fileexists:function(data, original, replacement, controller) {
 		var self = this;
+
+		var getCroppedPreview = function(file) {
+			var deferred = new $.Deferred();
+			// Only process image files.
+			var type = file.type.split('/').shift();
+			if (window.FileReader && type === 'image') {
+				var reader = new FileReader();
+				reader.onload = function (e) {
+					var blob = new Blob([event.target.result]);
+					window.URL = window.URL || window.webkitURL;
+					var originalUrl = window.URL.createObjectURL(blob);
+					var image = new Image();
+					image.src = originalUrl;
+					image.onload = function () {
+						var url = crop(image);
+						deferred.resolve(url);
+					}
+				};
+				reader.readAsArrayBuffer(file);
+			} else {
+				deferred.reject();
+			}
+			return deferred;
+		};
+
+		var crop = function(img) {
+			var canvas = document.createElement('canvas'),
+				width = img.width,
+				height = img.height,
+				x, y, size;
+
+			// calculate the width and height, constraining the proportions
+			if (width > height) {
+				y = 0;
+				x = (width - height) / 2;
+			} else {
+				y = (height - width) / 2;
+				x = 0;
+			}
+			size = Math.min(width, height);
+
+			// resize the canvas and draw the image data into it
+			canvas.width = 64;
+			canvas.height = 64;
+			var ctx = canvas.getContext("2d");
+			ctx.drawImage(img, x, y, size, size, 0, 0, 64, 64);
+			return canvas.toDataURL("image/png", 0.7);
+		};
+
 		var addConflict = function(conflicts, original, replacement) {
 
 				var conflict = conflicts.find('.conflict.template').clone();
@@ -238,9 +287,15 @@ var OCdialogs = {
 				lazyLoadPreview(path, original.type, function(previewpath){
 					conflict.find('.original .icon').css('background-image','url('+previewpath+')');
 				});
+				getCroppedPreview(replacement).then(
+					function(path){
+						conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
+					}, function(){
 						getMimeIcon(replacement.type,function(path){
 							conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
 						});
+					}
+				);
 				conflict.removeClass('template');
 				conflicts.append(conflict);