Implement support for replacing files during upload with the actions: replace, suggest name, and cancel

2 files changed, 107 insertions, 44 deletions

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 85e5cfb14c2..ce215cb8431 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -3,7 +3,7 @@ var FileList={
 	update:function(fileListHtml) {
 		$('#fileList').empty().html(fileListHtml);
 	},
-	addFile:function(name,size,lastModified,loading){
+	addFile:function(name,size,lastModified,loading,hidden){
 		var img=(loading)?OC.imagePath('core', 'loading.gif'):OC.imagePath('core', 'filetypes/file.png');
 		var html='<tr data-type="file" data-size="'+size+'">';
 		if(name.indexOf('.')!=-1){
@@ -36,8 +36,11 @@ var FileList={
 		}else{
 			$('tr').filterAttr('data-file',name).find('td.filename').draggable(dragOptions);
 		}
+		if (hidden) {
+			$('tr').filterAttr('data-file', name).hide();
+		}
 	},
-	addDir:function(name,size,lastModified){
+	addDir:function(name,size,lastModified,hidden){
 		html = $('<tr></tr>').attr({ "data-type": "dir", "data-size": size, "data-file": name});
 		td = $('<td></td>').attr({"class": "filename", "style": 'background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')' });
 		td.append('<input type="checkbox" />');
@@ -63,6 +66,9 @@ var FileList={
 		FileList.insertElement(name,'dir',html);
 		$('tr').filterAttr('data-file',name).find('td.filename').draggable(dragOptions);
 		$('tr').filterAttr('data-file',name).find('td.filename').droppable(folderDropOptions);
+		if (hidden) {
+			$('tr').filterAttr('data-file', name).hide();
+		}
 	},
 	refresh:function(data) {
 		result = jQuery.parseJSON(data.responseText);
@@ -82,7 +88,7 @@ var FileList={
 	},
 	insertElement:function(name,type,element){
 		//find the correct spot to insert the file or folder
-		var fileElements=$('tr[data-file][data-type="'+type+'"]');
+		var fileElements=$('tr[data-file][data-type="'+type+'"]:visible');
 		var pos;
 		if(name.localeCompare($(fileElements[0]).attr('data-file'))<0){
 			pos=-1;
@@ -137,11 +143,7 @@ var FileList={
 			event.preventDefault();
 			var newname=input.val();
 			if (newname != name) {
-				if ($('tr').filterAttr('data-file', newname).length > 0) {
-					$('#notification').html(newname+' '+t('files', 'already exists')+'<span class="replace">'+t('files', 'replace')+'</span><span class="cancel">'+t('files', 'cancel')+'</span>');
-					$('#notification').data('oldName', name);
-					$('#notification').data('newName', newname);
-					$('#notification').fadeIn();
+				if (FileList.checkName(name, newname, false)) {
 					newname = name;
 				} else {
 					$.get(OC.filePath('files','ajax','rename.php'), { dir : $('#dir').val(), newname: newname, file: name },function(result) {
@@ -151,7 +153,6 @@ var FileList={
 						}
 					});
 				}
-
 			}
 			tr.attr('data-file', newname);
 			var path = td.children('a.name').attr('href');
@@ -179,20 +180,62 @@ var FileList={
 			form.trigger('submit');
 		});
 	},
-	replace:function(oldName, newName) {
+	checkName:function(oldName, newName, isNewFile) {
+		if (isNewFile || $('tr').filterAttr('data-file', newName).length > 0) {
+			if (isNewFile) {
+				$('#notification').html(newName+' '+t('files', 'already exists')+'<span class="replace">'+t('files', 'replace')+'</span><span class="suggest">'+t('files', 'suggest name')+'</span><span class="cancel">'+t('files', 'cancel')+'</span>');
+			} else {
+				$('#notification').html(newName+' '+t('files', 'already exists')+'<span class="replace">'+t('files', 'replace')+'</span><span class="cancel">'+t('files', 'cancel')+'</span>');
+			}
+			$('#notification').data('oldName', oldName);
+			$('#notification').data('newName', newName);
+			$('#notification').data('isNewFile', isNewFile);
+			$('#notification').fadeIn();
+			return true;
+		} else {
+			return false;
+		}
+	},
+	replace:function(oldName, newName, isNewFile) {
 		// Finish any existing actions
 		if (FileList.lastAction || !FileList.useUndo) {
 			FileList.lastAction();
 		}
-		var tr = $('tr').filterAttr('data-file', oldName);
-		tr.hide();
+		$('tr').filterAttr('data-file', oldName).hide();
+		$('tr').filterAttr('data-file', newName).hide();
+		var tr = $('tr').filterAttr('data-file', oldName).clone();
+		tr.attr('data-replace', 'true');
+		tr.attr('data-file', newName);
+		var td = tr.children('td.filename');
+		td.children('a.name .span').text(newName);
+		var path = td.children('a.name').attr('href');
+		td.children('a.name').attr('href', path.replace(encodeURIComponent(oldName), encodeURIComponent(newName)));
+		if (newName.indexOf('.') > 0) {
+			var basename = newName.substr(0, newName.lastIndexOf('.'));
+		} else {
+			var basename = newName;
+		}
+		td.children('a.name').empty();
+		var span = $('<span class="nametext"></span>');
+		span.text(basename);
+		td.children('a.name').append(span);
+		if (newName.indexOf('.') > 0) {
+			span.append($('<span class="extension">'+newName.substr(newName.lastIndexOf('.'))+'</span>'));
+		}
+		FileList.insertElement(newName, tr.data('type'), tr);
+		tr.show();
 		FileList.replaceCanceled = false;
 		FileList.replaceOldName = oldName;
 		FileList.replaceNewName = newName;
+		FileList.replaceIsNewFile = isNewFile;
 		FileList.lastAction = function() {
 			FileList.finishReplace();
 		};
-		$('#notification').html(t('files', 'replaced')+' '+newName+' '+t('files', 'with')+' '+oldName+'<span class="undo">'+t('files', 'undo')+'</span>');
+		if (isNewFile) {
+			$('#notification').html(t('files', 'replaced')+' '+newName+'<span class="undo">'+t('files', 'undo')+'</span>');
+		} else {
+			$('#notification').html(t('files', 'replaced')+' '+newName+' '+t('files', 'with')+' '+oldName+'<span class="undo">'+t('files', 'undo')+'</span>');
+		}
 		$('#notification').fadeIn();
 	},
 	finishReplace:function() {
@@ -203,25 +246,7 @@ var FileList={
 			FileList.finishDelete(function() {
 				$.ajax({url: OC.filePath('files', 'ajax', 'rename.php'), async: false, data: { dir: $('#dir').val(), newname: FileList.replaceNewName, file: FileList.replaceOldName }, success: function(result) {
 					if (result && result.status == 'success') {
-						var tr = $('tr').filterAttr('data-file', FileList.replaceOldName);
-						tr.attr('data-file', FileList.replaceNewName);
-						var td = tr.children('td.filename');
-						td.children('a.name .span').text(FileList.replaceNewName);
-						var path = td.children('a.name').attr('href');
-						td.children('a.name').attr('href', path.replace(encodeURIComponent(FileList.replaceOldName), encodeURIComponent(FileList.replaceNewName)));
-						if (FileList.replaceNewName.indexOf('.') > 0) {
-							var basename = FileList.replaceNewName.substr(0, FileList.replaceNewName.lastIndexOf('.'));
-						} else {
-							var basename = FileList.replaceNewName;
-						}
-						td.children('a.name').empty();
-						var span = $('<span class="nametext"></span>');
-						span.text(basename);
-						td.children('a.name').append(span);
-						if (FileList.replaceNewName.indexOf('.') > 0) {
-							span.append($('<span class="extension">'+FileList.replaceNewName.substr(FileList.replaceNewName.lastIndexOf('.'))+'</span>'));
-						}
-						tr.show();
+						$('tr').filterAttr('data-replace', 'true').removeAttr('data-replace');
 					} else {
 						OC.dialogs.alert(result.data.message, 'Error moving file');
 					}
@@ -255,7 +280,7 @@ var FileList={
 				data: {dir:$('#dir').val(),files:fileNames},
 				complete: function(data){
 					boolOperationFinished(data, function(){
-						$('#notification').fadeOut();
+						$('#notification').fadeOut('400');
 						$.each(FileList.deleteFiles,function(index,file){
 							FileList.remove(file);
 						});
@@ -299,21 +324,39 @@ $(document).ready(function(){
 			FileList.deleteCanceled=true;
 			FileList.deleteFiles=null;
 		} else if (FileList.replaceOldName && FileList.replaceNewName) {
-			$('tr').filterAttr('data-file', FileList.replaceOldName).show();
+			if (FileList.replaceIsNewFile) {
+				// Delete the new uploaded file
+				FileList.deleteCanceled = false;
+				FileList.deleteFiles = [FileList.replaceOldName];
+				FileList.finishDelete(null, true);
+			} else {
+				$('tr').filterAttr('data-file', FileList.replaceOldName).show();
+			}
+			$('tr').filterAttr('data-replace', 'true').remove();
+			$('tr').filterAttr('data-file', FileList.replaceNewName).show();
 			FileList.replaceCanceled = true;
 			FileList.replaceOldName = null;
 			FileList.replaceNewName = null;
+			FileList.replaceIsNewFile = null;
 		}
 		FileList.lastAction = null;
-		$('#notification').fadeOut();
+		$('#notification').fadeOut('400');
 	});
 	$('#notification .replace').live('click', function() {
 		$('#notification').fadeOut('400', function() {
-			FileList.replace($('#notification').data('oldName'), $('#notification').data('newName'));
+			FileList.replace($('#notification').data('oldName'), $('#notification').data('newName'), $('#notification').data('isNewFile'));
 		});
 	});
+	$('#notification .suggest').live('click', function() {
+		$('tr').filterAttr('data-file', $('#notification').data('oldName')).show();
+		$('#notification').fadeOut('400');
+	});
 	$('#notification .cancel').live('click', function() {
-		$('#notification').fadeOut();
+		if ($('#notification').data('isNewFile')) {
+			FileList.deleteCanceled = false;
+			FileList.deleteFiles = [$('#notification').data('oldName')];
+			FileList.finishDelete(null, true);
+		}
 	});
 	FileList.useUndo=('onbeforeunload' in window)
 	$(window).bind('beforeunload', function (){
diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index a729b5f2e6a..3d347c3f564 100644
--- a/apps/files/js/files.js
+++ b/apps/files/js/files.js
@@ -236,7 +236,14 @@ $(document).ready(function() {
 								var size=t('files','Pending');
 							}
 							if(files && !dirName){
-								FileList.addFile(getUniqueName(files[i].name),size,date,true);
+								var uniqueName = getUniqueName(files[i].name);
+								if (uniqueName != files[i].name) {
+									FileList.checkName(uniqueName, files[i].name, true);
+									var hidden = true;
+								} else {
+									var hidden = false;
+								}
+								FileList.addFile(uniqueName,size,date,true,hidden);
 							} else if(dirName) {
 								var uploadtext = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName).find('.uploadtext')
 								var currentUploads = parseInt(uploadtext.attr('currentUploads'));
@@ -255,7 +262,14 @@ $(document).ready(function() {
 						}
 					}else{
 						var filename=this.value.split('\\').pop(); //ie prepends C:\fakepath\ in front of the filename
-						FileList.addFile(getUniqueName(filename),'Pending',date,true);
+						var uniqueName = getUniqueName(filename);
+						if (uniqueName != filename) {
+							FileList.checkName(uniqueName, filename, true);
+							var hidden = true;
+						} else {
+							var hidden = false;
+						}
+						FileList.addFile(uniqueName,'Pending',date,true,hidden);
 					}
 					if($.support.xhrFileUpload) {
 						for(var i=0;i<files.length;i++){
@@ -475,12 +489,18 @@ $(document).ready(function() {
 		$(this).append(input);
 		input.focus();
 		input.change(function(){
-			var name=getUniqueName($(this).val());
-			if(type != 'web' && name.indexOf('/')!=-1){
+			if(type != 'web' && $(this).val().indexOf('/')!=-1){
 				$('#notification').text(t('files','Invalid name, \'/\' is not allowed.'));
 				$('#notification').fadeIn();
 				return;
 			}
+			var name = getUniqueName($(this).val());
+			if (name != $(this).val()) {
+				FileList.checkName(name, $(this).val(), true);
+				var hidden = true;
+			} else {
+				var hidden = false;
+			}
 			switch(type){
 				case 'file':
 					$.post(
@@ -489,7 +509,7 @@ $(document).ready(function() {
 						function(result){
 							if (result.status == 'success') {
 								var date=new Date();
-								FileList.addFile(name,0,date);
+								FileList.addFile(name,0,date,false,hidden);
 								var tr=$('tr').filterAttr('data-file',name);
 								tr.data('mime','text/plain');
 								getMimeIcon('text/plain',function(path){
@@ -508,7 +528,7 @@ $(document).ready(function() {
 						function(result){
 							if (result.status == 'success') {
 								var date=new Date();
-								FileList.addDir(name,0,date);
+								FileList.addDir(name,0,date,hidden);
 							} else {
 								OC.dialogs.alert(result.data.message, 'Error');
 							}
@@ -539,7 +559,7 @@ $(document).ready(function() {
 					eventSource.listen('success',function(mime){
 						$('#uploadprogressbar').fadeOut();
 						var date=new Date();
-						FileList.addFile(localName,0,date);
+						FileList.addFile(localName,0,date,false,hidden);
 						var tr=$('tr').filterAttr('data-file',localName);
 						tr.data('mime',mime);
 						getMimeIcon(mime,function(path){