mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new file uploader that should work with more browsers 

tested with konqueror, chromium and firefox 4
This commit is contained in:
Robin Appelman 2011-06-03 02:44:31 +02:00
parent 016a892a78
commit 00711341e9
3 changed files with 92 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
files/css/files.css
View File

@ -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;
}

171
files/js/files.js
View File

@ -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';
}

22
files/templates/index.php
View File

@ -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>