fancyfying file upload, part I

diff --git a/files/css/files.css b/files/css/files.css
index 771e66fed6421baed9019e06b598c8311cdc920f..806582da2134277a7b084506c95e9d9baf51fd1a 100644 (file)
--- a/files/css/files.css
+++ b/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;
 }

diff --git a/files/js/files.js b/files/js/files.js
index f1cb200817b2432de4108b129aae20f7e492ed5a..edb57fc2c0e63414004dd8d473016bc4f8a04230 100644 (file)
--- a/files/js/files.js
+++ b/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();
+                       }
                });
        }
 }

diff --git a/files/templates/index.php b/files/templates/index.php
index f761f1f538d4a9930c9a1f5753f23ae0f343008d..54de41c594adfe9f8cce72570413eb22309a92ec 100644 (file)
--- a/files/templates/index.php
+++ b/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>