new file uploader that should work with more browsers

tested with konqueror, chromium and firefox 4

diff --git a/files/css/files.css b/files/css/files.css
index c3f7d82aa6e8cc4e5166a27c2d8461662bb42524..1cfca68ff55a43d945def9b05ee5f64191eb76f7 100644 (file)
--- 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 aed2d596272cf23aad1eeceb3f51734f98a2a067..70774f6ac44e89ee04cb48e3cdd4af7e3cf53252 100644 (file)
--- 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 4d34222b9667a34ae1b123cbf0b2386d04e6fc0d..6222724e7be5b60d9876b8619503994b7d8f68f1 100644 (file)
--- 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>