Skip to content
Snippets Groups Projects
Commit 00711341 authored by Robin Appelman's avatar Robin Appelman
Browse files

new file uploader that should work with more browsers 

tested with konqueror, chromium and firefox 4
parent 016a892a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
files/css/files.css
+ 24
− 4
View file @ 00711341
......@@ -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;
}
......
files/js/files.js
+ 50
− 121
View file @ 00711341
$(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
files/templates/index.php
+ 18
− 4
View file @ 00711341
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment