From 00711341e9da369a2c99ff0085b7e36531986f0f Mon Sep 17 00:00:00 2001
From: Robin Appelman <icewind1991@gmail.com>
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 c3f7d82aa6..1cfca68ff5 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 aed2d59627..70774f6ac4 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 4d34222b96..6222724e7b 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"];?>)" /> <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" /> <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>
+ <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" />
+ <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>
--
GitLab