Added uploading to folder and cancellable downloads
This commit is contained in:
parent
b1a33110fc
commit
4e89a0faf6
|
@ -30,7 +30,8 @@
|
||||||
.file_upload_filename { position: relative; z-index:100; padding-left: 0.8em; padding-right: 0.8em; cursor:pointer; border-top-left-radius:0; border-bottom-left-radius:0; }
|
.file_upload_filename { position: relative; z-index:100; padding-left: 0.8em; padding-right: 0.8em; cursor:pointer; border-top-left-radius:0; border-bottom-left-radius:0; }
|
||||||
.file_upload_filename img { position: absolute; top: 0.4em; left: 0.4em; }
|
.file_upload_filename img { position: absolute; top: 0.4em; left: 0.4em; }
|
||||||
|
|
||||||
#uploadprogressbar { position:absolute; right:14.5em; display:inline-block; width:10em; height:1.5em; top:.4em; }
|
#upload { position:absolute; right:13.5em; top:0em; }
|
||||||
|
#upload #uploadprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; }
|
||||||
|
|
||||||
.file_upload_form, .file_upload_wrapper, .file_upload_start, .file_upload_filename, #file_upload_submit { cursor:pointer; }
|
.file_upload_form, .file_upload_wrapper, .file_upload_start, .file_upload_filename, #file_upload_submit { cursor:pointer; }
|
||||||
|
|
||||||
|
@ -41,7 +42,7 @@ tbody tr:hover, tbody tr:active, tbody tr.selected { background-color:#f8f8f8; h
|
||||||
tbody tr { background-color:#fff; }
|
tbody tr { background-color:#fff; }
|
||||||
tbody tr.selected { background-color:#eee; }
|
tbody tr.selected { background-color:#eee; }
|
||||||
tbody a { color:#000; }
|
tbody a { color:#000; }
|
||||||
span.extention, td.date { color:#999; }
|
span.extention, span.uploading, td.date { color:#999; }
|
||||||
span.extention { opacity:0; -webkit-transition:opacity 500ms; -moz-transition:opacity 500ms; -o-transition:opacity 500ms; transition:opacity 500ms; }
|
span.extention { opacity:0; -webkit-transition:opacity 500ms; -moz-transition:opacity 500ms; -o-transition:opacity 500ms; transition:opacity 500ms; }
|
||||||
tr:hover span.extention { opacity:1; }
|
tr:hover span.extention { opacity:1; }
|
||||||
div.crumb { float:left; display:block; background:no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; }
|
div.crumb { float:left; display:block; background:no-repeat right 0; padding:.75em 1.5em 0 1em; height:2.9em; }
|
||||||
|
@ -60,8 +61,9 @@ table td.filename a.name { display:block; height:1.5em; vertical-align:middle; m
|
||||||
table tr[data-type="dir"] td.filename a.name {font-weight:bold; }
|
table tr[data-type="dir"] td.filename a.name {font-weight:bold; }
|
||||||
table td.filename a.name input, table td.filename a.name form { width:100%; cursor:text; }
|
table td.filename a.name input, table td.filename a.name form { width:100%; cursor:text; }
|
||||||
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.2em .5em .5em 0; }
|
table td.filename a, table td.login, table td.logout, table td.download, table td.upload, table td.create, table td.delete { padding:.2em .5em .5em 0; }
|
||||||
table td.filename .nametext, .modified { float:left; padding:.3em 0; }
|
table td.filename .nametext, .uploadtext, .modified { float:left; padding:.3em 0; }
|
||||||
table td.filename .nametext { width:60%; }
|
//table td.filename .nametext { width:60%; }
|
||||||
|
table td.filename .uploadtext { font-weight:normal; margin-left:.5em; }
|
||||||
table td.filename form { float:left; font-size:.85em; }
|
table td.filename form { float:left; font-size:.85em; }
|
||||||
table thead.fixed tr{ position:fixed; top:6.5em; z-index:49; -moz-box-shadow:0 -3px 7px #ddd; -webkit-box-shadow:0 -3px 7px #ddd; box-shadow:0 -3px 7px #ddd; }
|
table thead.fixed tr{ position:fixed; top:6.5em; z-index:49; -moz-box-shadow:0 -3px 7px #ddd; -webkit-box-shadow:0 -3px 7px #ddd; box-shadow:0 -3px 7px #ddd; }
|
||||||
table thead.fixed { height:2em; }
|
table thead.fixed { height:2em; }
|
||||||
|
|
|
@ -133,7 +133,20 @@ FileActions.register('all','Download',function(){return OC.imagePath('core','act
|
||||||
});
|
});
|
||||||
|
|
||||||
FileActions.register('all','Delete',function(){return OC.imagePath('core','actions/delete')},function(filename){
|
FileActions.register('all','Delete',function(){return OC.imagePath('core','actions/delete')},function(filename){
|
||||||
FileList.do_delete(filename);
|
if(Files.cancelUpload(filename)) {
|
||||||
|
if(filename.substr){
|
||||||
|
filename=[filename];
|
||||||
|
}
|
||||||
|
$.each(filename,function(index,file){
|
||||||
|
var filename = $('tr').filterAttr('data-file',file);
|
||||||
|
filename.hide();
|
||||||
|
filename.find('input[type="checkbox"]').removeAttr('checked');
|
||||||
|
filename.removeClass('selected');
|
||||||
|
});
|
||||||
|
procesSelection();
|
||||||
|
}else{
|
||||||
|
FileList.do_delete(filename);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
FileActions.register('all','Rename',function(){return OC.imagePath('core','actions/rename')},function(filename){
|
FileActions.register('all','Rename',function(){return OC.imagePath('core','actions/rename')},function(filename){
|
||||||
|
|
|
@ -42,6 +42,7 @@ FileList={
|
||||||
td.append('<input type="checkbox" />');
|
td.append('<input type="checkbox" />');
|
||||||
var link_elem = $('<a></a>').attr({ "class": "name", "href": "index.php?dir="+ encodeURIComponent($('#dir').val()+'/'+name).replace(/%2F/g, '/') });
|
var link_elem = $('<a></a>').attr({ "class": "name", "href": "index.php?dir="+ encodeURIComponent($('#dir').val()+'/'+name).replace(/%2F/g, '/') });
|
||||||
link_elem.append($('<span></span>').addClass('nametext').text(name));
|
link_elem.append($('<span></span>').addClass('nametext').text(name));
|
||||||
|
link_elem.append($('<span></span>').attr({'class': 'uploadtext', 'currentUploads': 0}));
|
||||||
td.append(link_elem);
|
td.append(link_elem);
|
||||||
html.append(td);
|
html.append(td);
|
||||||
if(size!='Pending'){
|
if(size!='Pending'){
|
||||||
|
|
|
@ -1,3 +1,25 @@
|
||||||
|
var uploadingFiles = {};
|
||||||
|
Files={
|
||||||
|
cancelUpload:function(filename) {
|
||||||
|
if(uploadingFiles[filename]) {
|
||||||
|
uploadingFiles[filename].abort();
|
||||||
|
delete uploadingFiles[filename];
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
cancelUploads:function() {
|
||||||
|
$.each(uploadingFiles,function(index,file){
|
||||||
|
file.abort();
|
||||||
|
delete uploadingFiles[index];
|
||||||
|
var filename = $('tr').filterAttr('data-file',index);
|
||||||
|
filename.hide();
|
||||||
|
filename.find('input[type="checkbox"]').removeAttr('checked');
|
||||||
|
filename.removeClass('selected');
|
||||||
|
});
|
||||||
|
procesSelection();
|
||||||
|
}
|
||||||
|
}
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$('#fileList tr').each(function(){
|
$('#fileList tr').each(function(){
|
||||||
//little hack to set unescape filenames in attribute
|
//little hack to set unescape filenames in attribute
|
||||||
|
@ -151,9 +173,13 @@ $(document).ready(function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
// drag&drop support using jquery.fileupload
|
// drag&drop support using jquery.fileupload
|
||||||
|
$(document).bind('drop dragover', function (e) {
|
||||||
|
e.preventDefault(); // prevent browser from doing anything, if file isn't dropped in dropZone
|
||||||
|
});
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
$('.file_upload_start').fileupload({
|
$('.file_upload_start').fileupload({
|
||||||
//dropZone: $('#content'), // restrict dropZone to content div
|
dropZone: $('#content'), // restrict dropZone to content div
|
||||||
add: function(e, data) {
|
add: function(e, data) {
|
||||||
var files = data.files;
|
var files = data.files;
|
||||||
var totalSize=0;
|
var totalSize=0;
|
||||||
|
@ -178,7 +204,97 @@ $(document).ready(function() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}else{
|
}else{
|
||||||
data.submit();
|
if($.support.xhrFileUpload) {
|
||||||
|
for(var i=0;i<files.length;i++){
|
||||||
|
var dropTarget = $(e.originalEvent.target).closest('tr');
|
||||||
|
if(dropTarget && dropTarget.attr('data-type') === 'dir') {
|
||||||
|
var dirName = dropTarget.attr('data-file')
|
||||||
|
var jqXHR = $('.file_upload_start').fileupload('send', {files: files[i],
|
||||||
|
formData: function(form) {
|
||||||
|
var formArray = form.serializeArray();
|
||||||
|
formArray[1]['value'] = dirName;
|
||||||
|
return formArray;
|
||||||
|
}}).success(function(result, textStatus, jqXHR) {
|
||||||
|
var response;
|
||||||
|
response=jQuery.parseJSON(result);
|
||||||
|
if(response[0] == undefined || response[0].status != 'success') {
|
||||||
|
$('#notification').text(t('files', response.data.message));
|
||||||
|
$('#notification').fadeIn();
|
||||||
|
}
|
||||||
|
var file=response[0];
|
||||||
|
delete uploadingFiles[file.name];
|
||||||
|
var currentUploads = parseInt(uploadtext.attr('currentUploads'));
|
||||||
|
currentUploads -= 1;
|
||||||
|
uploadtext.attr('currentUploads', currentUploads);
|
||||||
|
if(currentUploads === 0) {
|
||||||
|
var img = OC.imagePath('core', 'filetypes/folder.png');
|
||||||
|
var tr=$('tr').filterAttr('data-file',dirName);
|
||||||
|
tr.find('td.filename').attr('style','background-image:url('+img+')');
|
||||||
|
uploadtext.text('');
|
||||||
|
uploadtext.hide();
|
||||||
|
} else {
|
||||||
|
uploadtext.text(currentUploads + ' files uploading')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.error(function(jqXHR, textStatus, errorThrown) {
|
||||||
|
if(errorThrown === 'abort') {
|
||||||
|
$('#notification').hide();
|
||||||
|
$('#notification').text(t('files', 'Upload cancelled.'));
|
||||||
|
$('#notification').fadeIn();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var jqXHR = $('.file_upload_start').fileupload('send', {files: files[i]})
|
||||||
|
.success(function(result, textStatus, jqXHR) {
|
||||||
|
var response;
|
||||||
|
response=jQuery.parseJSON(result);
|
||||||
|
if(response[0] != undefined && response[0].status == 'success') {
|
||||||
|
var file=response[0];
|
||||||
|
delete uploadingFiles[file.name];
|
||||||
|
$('tr').filterAttr('data-file',file.name).data('mime',file.mime);
|
||||||
|
var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text();
|
||||||
|
if(size==t('files','Pending')){
|
||||||
|
$('tr').filterAttr('data-file',file.name).find('td.filesize').text(file.size);
|
||||||
|
}
|
||||||
|
FileList.loadingDone(file.name);
|
||||||
|
} else {
|
||||||
|
$('#notification').text(t('files', response.data.message));
|
||||||
|
$('#notification').fadeIn();
|
||||||
|
$('#fileList > tr').not('[data-mime]').fadeOut();
|
||||||
|
$('#fileList > tr').not('[data-mime]').remove();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.error(function(jqXHR, textStatus, errorThrown) {
|
||||||
|
if(errorThrown === 'abort') {
|
||||||
|
$('#notification').hide();
|
||||||
|
$('#notification').text(t('files', 'Upload cancelled.'));
|
||||||
|
$('#notification').fadeIn();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
uploadingFiles[files[i].name] = jqXHR;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
data.submit().success(function(data, status) {
|
||||||
|
response = jQuery.parseJSON(data[0].body.innerText);
|
||||||
|
if(response[0] != undefined && response[0].status == 'success') {
|
||||||
|
var file=response[0];
|
||||||
|
delete uploadingFiles[file.name];
|
||||||
|
$('tr').filterAttr('data-file',file.name).data('mime',file.mime);
|
||||||
|
var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text();
|
||||||
|
if(size==t('files','Pending')){
|
||||||
|
$('tr').filterAttr('data-file',file.name).find('td.filesize').text(file.size);
|
||||||
|
}
|
||||||
|
FileList.loadingDone(file.name);
|
||||||
|
} else {
|
||||||
|
$('#notification').text(t('files', response.data.message));
|
||||||
|
$('#notification').fadeIn();
|
||||||
|
$('#fileList > tr').not('[data-mime]').fadeOut();
|
||||||
|
$('#fileList > tr').not('[data-mime]').remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
var date=new Date();
|
var date=new Date();
|
||||||
if(files){
|
if(files){
|
||||||
for(var i=0;i<files.length;i++){
|
for(var i=0;i<files.length;i++){
|
||||||
|
@ -187,8 +303,22 @@ $(document).ready(function() {
|
||||||
}else{
|
}else{
|
||||||
var size=t('files','Pending');
|
var size=t('files','Pending');
|
||||||
}
|
}
|
||||||
if(files){
|
if(files && !dirName){
|
||||||
FileList.addFile(files[i].name,size,date,true);
|
FileList.addFile(files[i].name,size,date,true);
|
||||||
|
} else if(dirName) {
|
||||||
|
var uploadtext = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName).find('.uploadtext')
|
||||||
|
var currentUploads = parseInt(uploadtext.attr('currentUploads'));
|
||||||
|
currentUploads += 1;
|
||||||
|
uploadtext.attr('currentUploads', currentUploads);
|
||||||
|
if(currentUploads === 1) {
|
||||||
|
var img = OC.imagePath('core', 'loading.gif');
|
||||||
|
var tr=$('tr').filterAttr('data-file',dirName);
|
||||||
|
tr.find('td.filename').attr('style','background-image:url('+img+')');
|
||||||
|
uploadtext.text('1 file uploading');
|
||||||
|
uploadtext.show();
|
||||||
|
} else {
|
||||||
|
uploadtext.text(currentUploads + ' files uploading')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
|
@ -197,28 +327,6 @@ $(document).ready(function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
done: function(e, data) {
|
|
||||||
var response;
|
|
||||||
if(data.dataType == 'iframe ') {
|
|
||||||
response = jQuery.parseJSON(data.result[0].body.innerText);
|
|
||||||
} else {
|
|
||||||
response=jQuery.parseJSON(data.result);
|
|
||||||
}
|
|
||||||
if(response[0] != undefined && response[0].status == 'success') {
|
|
||||||
var file=response[0];
|
|
||||||
$('tr').filterAttr('data-file',file.name).data('mime',file.type);
|
|
||||||
var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text();
|
|
||||||
if(size==t('files','Pending')){
|
|
||||||
$('tr').filterAttr('data-file',file.name).find('td.filesize').text(file.size);
|
|
||||||
}
|
|
||||||
FileList.loadingDone(file.name);
|
|
||||||
} else {
|
|
||||||
$('#notification').text(t('files', response.data.message));
|
|
||||||
$('#notification').fadeIn();
|
|
||||||
$('#fileList > tr').not('[data-mime]').fadeOut();
|
|
||||||
$('#fileList > tr').not('[data-mime]').remove();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fail: function(e, data) {
|
fail: function(e, data) {
|
||||||
// TODO: cancel upload & display error notification
|
// TODO: cancel upload & display error notification
|
||||||
},
|
},
|
||||||
|
@ -230,18 +338,23 @@ $(document).ready(function() {
|
||||||
$('#uploadprogressbar').progressbar('value',progress);
|
$('#uploadprogressbar').progressbar('value',progress);
|
||||||
},
|
},
|
||||||
start: function(e, data) {
|
start: function(e, data) {
|
||||||
$('#uploadprogressbar').progressbar({value:0});
|
$('#uploadprogressbar').progressbar({value:0});
|
||||||
$('#uploadprogressbar').fadeIn();
|
$('#uploadprogressbar').fadeIn();
|
||||||
|
if(data.dataType != 'iframe ') {
|
||||||
|
$('#upload input.stop').show();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
stop: function(e, data) {
|
stop: function(e, data) {
|
||||||
$('#uploadprogressbar').progressbar('value',100);
|
if(data.dataType != 'iframe ') {
|
||||||
$('#uploadprogressbar').fadeOut();
|
$('#upload input.stop').hide();
|
||||||
|
}
|
||||||
|
$('#uploadprogressbar').progressbar('value',100);
|
||||||
|
$('#uploadprogressbar').fadeOut();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
|
//add multiply file upload attribute to all browsers except konqueror (which crashes when it's used)
|
||||||
if(navigator.userAgent.search(/konqueror/i)==-1){
|
if(navigator.userAgent.search(/konqueror/i)==-1){
|
||||||
$('.file_upload_start').attr('multiple','multiple')
|
$('.file_upload_start').attr('multiple','multiple')
|
||||||
|
|
|
@ -21,7 +21,11 @@
|
||||||
<iframe name="file_upload_target_1" class='file_upload_target' src=""></iframe>
|
<iframe name="file_upload_target_1" class='file_upload_target' src=""></iframe>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="uploadprogressbar"></div>
|
<div id="upload">
|
||||||
|
<div id="uploadprogressbar"></div>
|
||||||
|
<input type="button" class="stop" style="display:none" value="<?php echo $l->t('Cancel upload');?>" onclick="javascript:Files.cancelUploads();" />
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="file_action_panel"></div>
|
<div id="file_action_panel"></div>
|
||||||
<?php else:?>
|
<?php else:?>
|
||||||
|
|
|
@ -21,6 +21,10 @@
|
||||||
<?php echo htmlspecialchars($file['basename']);?><span class='extention'><?php echo $file['extention'];?></span>
|
<?php echo htmlspecialchars($file['basename']);?><span class='extention'><?php echo $file['extention'];?></span>
|
||||||
<?php endif;?>
|
<?php endif;?>
|
||||||
</span>
|
</span>
|
||||||
|
<?php if($file['type'] == 'dir'):?>
|
||||||
|
<span class="uploadtext" currentUploads="0">
|
||||||
|
</span>
|
||||||
|
<?php endif;?>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="filesize" title="<?php echo human_file_size($file['size']); ?>" style="color:rgb(<?php echo $simple_size_color.','.$simple_size_color.','.$simple_size_color ?>)"><?php echo $simple_file_size; ?></td>
|
<td class="filesize" title="<?php echo human_file_size($file['size']); ?>" style="color:rgb(<?php echo $simple_size_color.','.$simple_size_color.','.$simple_size_color ?>)"><?php echo $simple_file_size; ?></td>
|
||||||
|
|
Loading…
Reference in New Issue