fancyfying file upload, part I

files/css/files.css

@@ -23,6 +23,11 @@
 	display: none;
 }
 
+#file_upload_form input[type="button"]{
+	/* this is a dirty wurgaround, Jan needs to fix it in global css*/
+	font-size: 0.9em;
+}
+
 #file_newfolder_form {
 	display: none;
 }

files/js/files.js

@@ -74,6 +74,12 @@ $(document).ready(function() {
 		$('#file_upload_target').load(uploadFinished);
 	});
 	
+	$('#file_upload_cancel').click(function() {
+		$('#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',
@@ -86,8 +92,16 @@ $(document).ready(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);
+// 			$('#file_upload_form').slideDown(250);
+			$('#fileSelector').click();
 		} else {
 			$('#file_action_panel').attr('activeAction', 'false');
 			$('#file_upload_form').slideUp(250);
@@ -95,6 +109,8 @@ $(document).ready(function() {
 		return false;
 	});
 	
+	
+	
 	$('.new-dir').click(function(){
 		if($('#file_action_panel').attr('activeAction') != 'new-dir') {
 			$('#file_action_panel').attr('activeAction', 'new-dir');
@@ -151,7 +167,12 @@ function uploadFinished() {
 		$.ajax({
 			url: 'ajax/list.php',
 			data: "dir="+dir,
-			complete: refreshContents
+			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();
+			}
 		});
 	}
 }

files/templates/index.php

@@ -1,6 +1,6 @@
 <div class="controls">
 	<p class="actions">
-		<a href="" title="" class="upload" id="file_upload_button">Upload</a><a
+		<a href="" title="" class="upload" id="file_upload_button" style="background-image:url(<?php  echo mimetype_icon('file'); ?>)">Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)</a><a
 href="" title="" class="new-dir">New folder</a><a href="" title=""
 class="download">Download</a><a href="" title="" class="share">Share</a><a
 href="" title="" class="delete">Delete</a>
@@ -9,9 +9,10 @@ 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" name="dir" value="<?php echo $_["dir"] ?>" id="dir"><input
-type="file" name="file" id="fileSelector"><input class="prettybutton" type="submit"
-id="file_upload_start" value="Upload (max <?php echo $_["uploadMaxHumanFilesize"];?>)" /><iframe id="file_upload_target"
+type="hidden" name="dir" value="<?php echo $_["dir"] ?>" id="dir"><input class="prettybutton" type="submit"
+id="file_upload_start" value="Upload" />&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" name="file_new_dir_name" id="file_new_dir_name" />&nbsp;<input class="prettybutton" type="button" id="file_new_dir_submit" name="file_new_dir_submit" value="OK" /></form>
 	</div>