From 00711341e9da369a2c99ff0085b7e36531986f0f Mon Sep 17 00:00:00 2001 From: Robin Appelman Date: Fri, 3 Jun 2011 02:44:31 +0200 Subject: [PATCH] new file uploader that should work with more browsers tested with konqueror, chromium and firefox 4 --- files/css/files.css | 28 ++++++- files/js/files.js | 171 +++++++++++--------------------------- files/templates/index.php | 22 ++++- 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(''); -// $('#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=''; + html+=''; + html+=''+name+''; + html+=''+size+''; + html+=''+uploadTime+''; + html+=''; + html+=''; + $('#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 @@
-
" id="max_upload">)">" id="dir">)" /> 
 
DownloadDelete +
+ " id="max_upload"> + )"> + " id="dir"> +
+ )"/> + +
  + + +
+
+   + +
+ Download + + Delete