new file uploader that should work with more browsers

tested with konqueror, chromium and firefox 4

3 files changed, 92 insertions, 129 deletions

diff --git a/files/css/files.css b/files/css/files.css
index c3f7d82aa6e..1cfca68ff55 100644
--- a/files/css/files.css
+++ b/files/css/files.css
@@ -23,24 +23,44 @@
 	display: inline;
 }
 
-#fileSelector, #file_upload_cancel, #file_newfolder_submit {
+#fileSelector, #file_upload_submit, #file_newfolder_submit {
 	display: none;
 }
 
-#file_upload_start, #file_newfolder_name {
+#file_upload_filename, #file_newfolder_name {
 	background-repeat: no-repeat;
 	background-position: 0.5em 0;
 	padding-left: 2em;
 }
 
-#file_upload_start {background-image:url(../../img/mimetypes/file.png);}
+#file_upload_filename {
+	background-image:url(../../img/mimetypes/file.png);
+}
+#file_upload_start {opacity:0;}
 
 #file_newfolder_name {
 	background-image:url(../../img/places/folder.png); font-weight: bold; 
 	width: 14em;
 }
 
-#file_newfolder_submit {
+#file_upload_start, #file_upload_filename{
+	position:absolute;
+	top:0px;
+	left:0px;
+	width:30ex;
+	font-size: 0.9em;
+}
+
+#file_upload_wrapper{
+	position:relative;
+	top:-1.2em;
+	left:-2em;
+	display: -moz-inline-box; /* fallback for older firefox versions*/
+	display: inline-block;
+	width:30ex;
+}
+
+#file_newfolder_submit, #file_upload_submit {
 	width: 3em;
 }
 
diff --git a/files/js/files.js b/files/js/files.js
index aed2d596272..70774f6ac44 100644
--- a/files/js/files.js
+++ b/files/js/files.js
@@ -1,7 +1,5 @@
 $(document).ready(function() {
 	$('#file_action_panel').attr('activeAction', false);
-	$('#file_upload_start').attr('mode', 'menu');
-	$('#file_upload_form').attr('uploading', false);
 	$('#file_newfolder_name').css('width', '14em');
 	$('#file_newfolder_submit').css('width', '3em');
 	
@@ -15,16 +13,6 @@ $(document).ready(function() {
         }
     );
 
-    // Sets logs table behaviour :
-    $('.logs tr').hover(
-        function() {
-            $(this).addClass('mouseOver');
-        },
-        function() {
-            $(this).removeClass('mouseOver');
-        }
-    );
-
     // Sets the file-action buttons behaviour :
     $('td.fileaction a').click(function() {
         $(this).parent().append($('#file_menu'));
@@ -74,53 +62,6 @@ $(document).ready(function() {
 		return false;
 	});
 	
-	$('#file_upload_start').click(function() {
-		if($('#file_upload_start').attr('mode') == 'menu') {
-			$('#file_upload_form')[0].reset();
-			$('#fileSelector').change(function() {
-				//Chromium prepends C:\fakepath....
-				bspos = $('#fileSelector').val().lastIndexOf('\\')+1;
-				filename = $('#fileSelector').val().substr(bspos);
-				
-				$('#file_upload_start').val('Upload ' + filename);
-				$('#fileSelector').hide();
-				$('#file_upload_cancel').slideDown(250);
-				$('#file_upload_start').attr('mode', 'action');
-			});
-			$('#file_upload_start').focusin(function() {
-				if($('#fileSelector').val() == '') {
-					$('#fileSelector').hide();
-					$('#file_upload_start').unbind('focusin');
-				}
-			});
-			$('#fileSelector').focusout(function() {
-				if($('#fileSelector').val() == '') {
-					$('#fileSelector').hide();
-				}
-			});
-			$('#fileSelector').show();	//needed for Chromium compatibility
-			//rekonq does not call change-event, when click() is executed by script
-			if(navigator.userAgent.indexOf('rekonq') == -1){ 
-				$('#fileSelector').click();
-			}
-			$('#fileSelector').focus();
-		} else if($('#file_upload_start').attr('mode') == 'action') {
-			$('#file_upload_cancel').slideUp(250);
-			$('#file_upload_form').attr('uploading', true);
-			$('#file_upload_target').load(uploadFinished);
-		}
-	});
-	
-	$('#file_upload_cancel').click(function() {
-		$('#file_upload_form')[0].reset();
-		$('#file_upload_start').val('Upload ' + $('.max_human_file_size:first').val());
-		$('#file_upload_start').attr('mode', 'menu');
-		$('#file_upload_cancel').hide();
-// 		$('#file_action_panel').attr('activeAction', 'false');
-// 		$('#file_upload_form').hide();
-// 		$('p.actions a.upload:first').show();
-	});
-	
 	$('#file_new_dir_submit').click(function() {
 		$.ajax({
 			url: 'ajax/newfolder.php',
@@ -163,42 +104,6 @@ $(document).ready(function() {
 		$('#file_newfolder_submit').fadeOut(250).trigger('vanish');
 	});
 	
-// 	$('.upload').click(function(){
-// 		if($('#file_action_panel').attr('activeAction') != 'upload') {
-// 			$('#file_action_panel').attr('activeAction', 'upload');
-// 			$('#fileSelector').replaceWith('<input type="file" name="file" id="fileSelector">');
-// 			$('#fileSelector').change(function() {
-// 				$('#file_upload_start').val('Upload ' + $('#fileSelector').val());
-// 				$('p.actions a.upload:first').after($('#file_upload_form'));
-// 				$('#file_upload_form').css('display', 'inline');
-// 				$('p.actions a.upload:first').hide();
-// 				$('#fileSelector').hide();
-// 			});
-// 			$('#file_action_panel form').slideUp(250);
-// // 			$('#file_upload_form').slideDown(250);
-// 			$('#fileSelector').click();
-// 		} else {
-// 			$('#file_action_panel').attr('activeAction', 'false');
-// 			$('#file_upload_form').slideUp(250);
-// 		}
-// 		return false;
-// 	});
-	
-	
-	
-// 	$('.new-dir').click(function(){
-// 		if($('#file_action_panel').attr('activeAction') != 'new-dir') {
-// 			$('#file_action_panel').attr('activeAction', 'new-dir');
-// 			$('#file_new_dir_name').val('');
-// 			$('#file_action_panel form').slideUp(250);
-// 			$('#file_newfolder_form').slideDown(250);
-// 		} else {
-// 			$('#file_newfolder_form').slideUp(250);
-// 			$('#file_action_panel').attr('activeAction', false);
-// 		}
-// 		return false;
-// 	});
-	
 	$('.download').click(function(event) {
 		var files='';
 		$('td.selection input:checkbox:checked').parent().parent().children('.filename').each(function(i,element){
@@ -230,6 +135,38 @@ $(document).ready(function() {
 		
 		return false;
 	});
+
+	$('#file_upload_start').change(function(){
+		var filename=$(this).val();
+		filename=filename.replace(/^.*[\/\\]/g, '');
+		$('#file_upload_filename').val(filename);
+		$('#file_upload_submit').show();
+	})
+	
+	$('#file_upload_submit').click(function(){
+		$('#file_upload_form').submit();
+		var name=$('#file_upload_filename').val();
+		if($('#file_upload_start')[0].files[0] && $('#file_upload_start')[0].files[0].size>0){
+			var size=humanFileSize($('#file_upload_start')[0].files[0].size);
+		}else{
+			var size='Pending';
+		}
+		var date=new Date();
+		var monthNames = [ "January", "February", "March", "April", "May", "June",
+		"July", "August", "September", "October", "November", "December" ];
+		var uploadTime=monthNames[date.getMonth()]+' '+date.getDate()+', '+date.getFullYear()+', '+((date.getHours()<10)?'0':'')+date.getHours()+':'+date.getMinutes();
+		var html='<tr>';
+		html+='<td class="selection"><input type="checkbox" /></td>';
+		html+='<td class="filename"><a style="background-image:url(img/file.png)" href="ajax/download.php?file='+$('#dir').val()+'/'+name+'">'+name+'</a></td>';
+		html+='<td class="filesize">'+size+'</td>';
+		html+='<td class="date">'+uploadTime+'</td>';
+		html+='<td class="fileaction"><a href="" title="+" class="dropArrow"></a></td>';
+		html+='</tr>';
+		$('#fileList').append($(html));
+		$('#file_upload_filename').val($('#file_upload_filename').data('upload_text'));
+	});
+	//save the original upload button text
+	$('#file_upload_filename').data('upload_text',$('#file_upload_filename').val());
 });
 
 var adjustNewFolderSize = function() {
@@ -251,32 +188,6 @@ function unsplitSize(stayingEl, vanishingEl) {
 	$(vanishingEl).fadeOut(250);
 }
 
-function uploadFinished() {
-	result = $('#file_upload_target').contents().text();
-	result = eval("(" + result + ");");
-	$('#file_upload_target').load(function(){});
-	if(result.status == "error") {
-		if($('#file_upload_form').attr('uploading') == true) {
-			alert('An error occcured, upload failed.\nError code: ' + result.data.error + '\nFilename: ' + result.data.file);
-		}
-	} else {
-		dir = $('#dir').val();
-		$.ajax({
-			url: 'ajax/list.php',
-			data: "dir="+dir,
-			complete: function(data) {
-				refreshContents(data);
-// 				$('#file_action_panel').prepend($('#file_upload_form'));
-// 				$('#file_upload_form').css('display', 'block').hide();
-// 				$('p.actions a.upload:first').show();
-				$('#file_upload_start').val('Upload ' + $('.max_human_file_size:first').val());
-				$('#file_upload_start').attr('mode', 'menu');
-			}
-		});
-	}
-	$('#file_upload_form').attr('uploading', false);
-}
-
 function resetFileActionPanel() {
 	$('#file_action_panel form').css({"display":"none"});
 	$('#file_action_panel').attr('activeAction', false);
@@ -322,3 +233,21 @@ function updateBreadcrumb(breadcrumbHtml) {
 function updateFileList(fileListHtml) {
 	$('#fileList').empty().html(fileListHtml);
 }
+
+function humanFileSize(bytes){
+	if( bytes < 1024 ){
+		return bytes+' B';
+	}
+	bytes = Math.round(bytes / 1024, 1 );
+	if( bytes < 1024 ){
+		return bytes+' kB';
+	}
+	bytes = Math.round( bytes / 1024, 1 );
+	if( bytes < 1024 ){
+		return bytes+' MB';
+	}
+	
+	// Wow, heavy duty for owncloud
+	bytes = Math.round( bytes / 1024, 1 );
+	return bytes+' GB';
+}
\ No newline at end of file
diff --git a/files/templates/index.php b/files/templates/index.php
index 4d34222b966..6222724e7be 100644
--- a/files/templates/index.php
+++ b/files/templates/index.php
@@ -1,9 +1,23 @@
 <div class="controls">
 	<div class="actions">
-		<form id="file_upload_form" action="ajax/upload.php"
-method="post" enctype="multipart/form-data" target="file_upload_target"><input
-type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload"><input
-type="hidden" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)"><input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir"><input class="prettybutton" type="submit" id="file_upload_start" value="Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)" />&nbsp;<input class="prettybutton" type="button" id="file_upload_cancel" value="X" /><input type="file" name="file" id="fileSelector"><iframe id="file_upload_target" name="file_upload_target" src=""></iframe></form><form id="file_newfolder_form"><input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;<input class="prettybutton" type="button" id="file_newfolder_submit" name="file_newfolder_submit" value="OK" /></form><a href="" title="" class="download">Download</a><a href="" title="" class="share">Share</a><a href="" title="" class="delete">Delete</a>
+		<form id="file_upload_form" action="ajax/upload.php" method="post" enctype="multipart/form-data" target="file_upload_target">
+			<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $_["uploadMaxFilesize"] ?>" id="max_upload">
+			<input type="hidden" class="max_human_file_size" value="(max <?php echo $_["uploadMaxHumanFilesize"]; ?>)">
+			<input type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir">
+			<div id='file_upload_wrapper'>
+				<input class="prettybutton" id='file_upload_filename' value="Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)"/>
+				<input class="prettybutton" type="file" id="file_upload_start" name='file'/>
+			</div>&nbsp;
+			<input class="prettybutton" type="button" id="file_upload_submit" name="file_upload_submit" value="OK" />
+			<iframe id="file_upload_target" name="file_upload_target" src=""></iframe>
+		</form>
+		<form id="file_newfolder_form">
+			<input type="text" class="prettybutton" name="file_newfolder_name" id="file_newfolder_name" value="New Folder" />&nbsp;
+			<input class="prettybutton" type="button" id="file_newfolder_submit" name="file_newfolder_submit" value="OK" />
+		</form>
+		<a href="" title="" class="download">Download</a>
+		<a href="" title="" class="share">Share</a>
+		<a href="" title="" class="delete">Delete</a>
 	</div>
 	<div id="file_action_panel">
 	</div>