open-dsi
/
nextcloud-server
mirror of https://github.com/nextcloud/server
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #2279 from owncloud/refactor_upload_js

Browse Source 
Refactor upload js
remotes/origin/stable6
Bart Visscher 12 years ago
parent 248e097f3c 7ecbaef16c
commit 6d6dfffea7
4 changed files with 298 additions and 252 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      apps/files/ajax/upload.php
  2. 6
      apps/files/css/files.css
  3. 165
      apps/files/js/filelist.js
  4. 378
      apps/files/js/files.js

1
apps/files/ajax/upload.php
Unescape View File

@ -71,6 +71,7 @@ if (strpos($dir, '..') === false) {
'size' => $meta['size'],
'id' => $meta['fileid'],
'name' => basename($target),
'originalname'=>$files['name'][$i],
'uploadMaxFilesize' => $maxUploadFilesize,
'maxHumanFilesize' => $maxHumanFilesize
);

6
apps/files/css/files.css
Unescape View File

@ -45,7 +45,11 @@
}
#uploadprogresswrapper { float: right; position: relative; }
#uploadprogresswrapper #uploadprogressbar { position:relative; display:inline-block; width:10em; height:1.5em; top:.4em; }
#uploadprogresswrapper #uploadprogressbar {
position:relative; float: right;
margin-left: 12px; width:10em; height:1.5em; top:.4em;
display:inline-block;
}
/* FILE TABLE */

165
apps/files/js/filelist.js
Unescape View File

@ -88,17 +88,17 @@ var FileList={
$('#permissions').val()
);
FileList.insertElement(name, 'file', tr.attr('data-file',name));
var row = $('tr').filterAttr('data-file',name);
FileList.insertElement(name, 'file', tr);
if(loading){
row.data('loading',true);
tr.data('loading',true);
}else{
row.find('td.filename').draggable(dragOptions);
tr.find('td.filename').draggable(dragOptions);
}
if (hidden) {
row.hide();
tr.hide();
}
FileActions.display(row.find('td.filename'));
FileActions.display(tr.find('td.filename'));
return tr;
},
addDir:function(name,size,lastModified,hidden){
@ -113,13 +113,14 @@ var FileList={
);
FileList.insertElement(name,'dir',tr);
var row = $('tr').filterAttr('data-file',name);
row.find('td.filename').draggable(dragOptions);
row.find('td.filename').droppable(folderDropOptions);
var td = tr.find('td.filename');
td.draggable(dragOptions);
td.droppable(folderDropOptions);
if (hidden) {
row.hide();
tr.hide();
}
FileActions.display(row.find('td.filename'));
FileActions.display(tr.find('td.filename'));
return tr;
},
refresh:function(data) {
var result = jQuery.parseJSON(data.responseText);
@ -351,6 +352,148 @@ var FileList={
};
$(document).ready(function(){
// handle upload events
var file_upload_start = $('#file_upload_start');
file_upload_start.on('fileuploaddrop', function(e, data) {
// only handle drop to dir if fileList exists
if ($('#fileList').length > 0) {
var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder
var dirName = dropTarget.data('file');
// update folder in form
data.formData = function(form) {
var formArray = form.serializeArray();
// array index 0 contains the max files size
// array index 1 contains the request token
// array index 2 contains the directory
var parentDir = formArray[2]['value'];
if (parentDir === '/') {
formArray[2]['value'] += dirName;
} else {
formArray[2]['value'] += '/'+dirName;
}
return formArray;
}
}
}
});
file_upload_start.on('fileuploadadd', function(e, data) {
// only add to fileList if it exists
if ($('#fileList').length > 0) {
if(FileList.deleteFiles && FileList.deleteFiles.indexOf(data.files[0].name)!=-1){//finish delete if we are uploading a deleted file
FileList.finishDelete(null, true); //delete file before continuing
}
// add ui visualization to existing folder or as new stand-alone file?
var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.data('type') === 'dir') {
// add to existing folder
var dirName = dropTarget.data('file');
// set dir context
data.context = $('tr').filterAttr('data-type', 'dir').filterAttr('data-file', dirName);
// update upload counter ui
var uploadtext = data.context.find('.uploadtext');
var currentUploads = parseInt(uploadtext.attr('currentUploads'));
currentUploads += 1;
uploadtext.attr('currentUploads', currentUploads);
if(currentUploads === 1) {
var img = OC.imagePath('core', 'loading.gif');
data.context.find('td.filename').attr('style','background-image:url('+img+')');
uploadtext.text(t('files', '1 file uploading'));
uploadtext.show();
} else {
uploadtext.text(currentUploads + ' ' + t('files', 'files uploading'));
}
} else {
// add as stand-alone row to filelist
var uniqueName = getUniqueName(data.files[0].name);
var size=t('files','Pending');
if(data.files[0].size>=0){
size=data.files[0].size;
}
var date=new Date();
// create new file context
data.context = FileList.addFile(uniqueName,size,date,true,false);
}
}
});
file_upload_start.on('fileuploaddone', function(e, data) {
// only update the fileList if it exists
if ($('#fileList').length > 0) {
var response;
if (typeof data.result === 'string') {
response = data.result;
} else {
// fetch response from iframe
response = data.result[0].body.innerText;
}
var result=$.parseJSON(response);
if(typeof result[0] !== 'undefined' && result[0].status === 'success') {
var file = result[0];
if (data.context.data('type') === 'file') {
// update file data
data.context.attr('data-mime',file.mime).attr('data-id',file.id);
var size = data.context.data('size');
if(size!=file.size){
data.context.attr('data-size', file.size);
data.context.find('td.filesize').text(humanFileSize(file.size));
}
if (FileList.loadingDone) {
FileList.loadingDone(file.name, file.id);
}
} else {
// update upload counter ui
var uploadtext = data.context.find('.uploadtext');
var currentUploads = parseInt(uploadtext.attr('currentUploads'));
currentUploads -= 1;
uploadtext.attr('currentUploads', currentUploads);
if(currentUploads === 0) {
var img = OC.imagePath('core', 'filetypes/folder.png');
data.context.find('td.filename').attr('style','background-image:url('+img+')');
uploadtext.text('');
uploadtext.hide();
} else {
uploadtext.text(currentUploads + ' ' + t('files', 'files uploading'));
}
// update folder size
var size = parseInt(data.context.data('size'));
size += parseInt(file.size) ;
data.context.attr('data-size', size);
data.context.find('td.filesize').text(humanFileSize(size));
}
}
}
});
file_upload_start.on('fileuploadfail', function(e, data) {
// only update the fileList if it exists
// cleanup files, error notification has been shown by fileupload code
var tr = data.context;
if (typeof tr === 'undefined') {
tr = $('tr').filterAttr('data-file', data.files[0].name);
}
if (tr.attr('data-type') === 'dir') {
//cleanup uploading to a dir
var uploadtext = tr.find('.uploadtext');
var img = OC.imagePath('core', 'filetypes/folder.png');
tr.find('td.filename').attr('style','background-image:url('+img+')');
uploadtext.text('');
uploadtext.hide(); //TODO really hide already
} else {
//remove file
tr.fadeOut();
tr.remove();
}
});
$('#notification').hide();
$('#notification').on('click', '.undo', function(){
if (FileList.deleteFiles) {

378
apps/files/js/files.js
Unescape View File

@ -247,254 +247,151 @@ $(document).ready(function() {
});
if ( document.getElementById('data-upload-form') ) {
$(function() {
$('#file_upload_start').fileupload({
dropZone: $('#content'), // restrict dropZone to content div
add: function(e, data) {
var files = data.files;
var totalSize=0;
if(files){
if (FileList.lastAction) {
FileList.lastAction();
$(function() {
$('#file_upload_start').fileupload({
dropZone: $('#content'), // restrict dropZone to content div
//singleFileUploads is on by default, so the data.files array will always have length 1
add: function(e, data) {
if(data.files[0].type === '' && data.files[0].size == 4096)
{
data.textStatus = 'dirorzero';
data.errorThrown = t('files','Unable to upload your file as it is a directory or has 0 bytes');
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
return true; //don't upload this file but go on with next in queue
}
for(var i=0;i<files.length;i++){
if(files[i].size ==0 && files[i].type== '')
{
OC.dialogs.alert(t('files', 'Unable to upload your file as it is a directory or has 0 bytes'), t('files', 'Upload Error'));
return;
}
totalSize+=files[i].size;
}
}
if(totalSize>$('#max_upload').val()){
$( '#uploadsize-message' ).dialog({
modal: true,
buttons: {
Close: {
text:t('files', 'Close'),
click:function() {
$( this ).dialog( 'close' );
}
}
}
var totalSize=0;
$.each(data.originalFiles, function(i,file){
totalSize+=file.size;
});
}else{
var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.attr('data-type') === 'dir') { // drag&drop upload to folder
var dirName = dropTarget.attr('data-file')
if(totalSize>$('#max_upload').val()){
data.textStatus = 'notenoughspace';
data.errorThrown = t('files','Not enough space available');
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
return false; //don't upload anything
}
var date=new Date();
if(files){
for(var i=0;i<files.length;i++){
if(files[i].size>0){
var size=files[i].size;
}else{
var size=t('files','Pending');
}
if(files && !dirName){
var uniqueName = getUniqueName(files[i].name);
if (uniqueName != files[i].name) {
FileList.checkName(uniqueName, files[i].name, true);
var hidden = true;
} else {
var hidden = false;
}
FileList.addFile(uniqueName,size,date,true,hidden);
} 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(t('files', '1 file uploading'));
uploadtext.show();
} else {
uploadtext.text(t('files', '{count} files uploading', {count: currentUploads}));
}
}
// start the actual file upload
var jqXHR = data.submit();
// remember jqXHR to show warning to user when he navigates away but an upload is still in progress
if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') {
var dirName = data.context.data('file');
if(typeof uploadingFiles[dirName] === 'undefined') {
uploadingFiles[dirName] = {};
}
}else{
var filename=this.value.split('\\').pop(); //ie prepends C:\fakepath\ in front of the filename
var uniqueName = getUniqueName(filename);
if (uniqueName != filename) {
FileList.checkName(uniqueName, filename, true);
var hidden = true;
uploadingFiles[dirName][data.files[0].name] = jqXHR;
} else {
uploadingFiles[data.files[0].name] = jqXHR;
}
//show cancel button
if($('html.lte9').length === 0 && data.dataType !== 'iframe') {
$('#uploadprogresswrapper input.stop').show();
}
},
/**
* called after the first add, does NOT have the data param
* @param e
*/
start: function(e) {
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return;
}
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
},
fail: function(e, data) {
if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) {
if (data.textStatus === 'abort') {
$('#notification').text(t('files', 'Upload cancelled.'));
} else {
var hidden = false;
// HTTP connection problem
$('#notification').text(data.errorThrown);
}
FileList.addFile(uniqueName,'Pending',date,true,hidden);
$('#notification').fadeIn();
//hide notification after 5 sec
setTimeout(function() {
$('#notification').fadeOut();
}, 5000);
}
if($.support.xhrFileUpload) {
for(var i=0;i<files.length;i++){
var fileName = files[i].name
var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.attr('data-type') === 'dir') { // drag&drop upload to folder
var dirName = dropTarget.attr('data-file')
var jqXHR = $('#file_upload_start').fileupload('send', {files: files[i],
formData: function(form) {
var formArray = form.serializeArray();
// array index 0 contains the max files size
// array index 1 contains the request token
// array index 2 contains the directory
formArray[2]['value'] = dirName;
return formArray;
}}).success(function(result, textStatus, jqXHR) {
var response;
response=jQuery.parseJSON(result);
if(response[0] == undefined || response[0].status != 'success') {
OC.Notification.show(t('files', response.data.message));
}
Files.updateMaxUploadFilesize(response);
var file=response[0];
// TODO: this doesn't work if the file name has been changed server side
delete uploadingFiles[dirName][file.name];
if ($.assocArraySize(uploadingFiles[dirName]) == 0) {
delete uploadingFiles[dirName];
}
//TODO update file upload size limit
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 === 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(t('files', '{count} files uploading', {count: currentUploads}));
}
})
.error(function(jqXHR, textStatus, errorThrown) {
if(errorThrown === 'abort') {
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(t('files', '{count} files uploading', {count: currentUploads}));
}
delete uploadingFiles[dirName][fileName];
OC.Notification.show(t('files', 'Upload cancelled.'));
}
});
//TODO test with filenames containing slashes
if(uploadingFiles[dirName] === undefined) {
uploadingFiles[dirName] = {};
}
uploadingFiles[dirName][fileName] = jqXHR;
} else {
var jqXHR = $('#file_upload_start').fileupload('send', {files: files[i]})
.success(function(result, textStatus, jqXHR) {
var response;
response=jQuery.parseJSON(result);
Files.updateMaxUploadFilesize(response);
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).data('id',file.id);
var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text();
if(size==t('files','Pending')){
var sizeElement = $('tr').filterAttr('data-file',file.name).find('td.filesize');
sizeElement.text(simpleFileSize(file.size));
sizeElement.attr('title',humanFileSize(file.size));
}
//TODO update file upload size limit
FileList.loadingDone(file.name, file.id);
} else {
Files.cancelUpload(this.files[0].name);
OC.Notification.show(t('files', response.data.message));
$('#fileList > tr').not('[data-mime]').fadeOut();
$('#fileList > tr').not('[data-mime]').remove();
}
})
.error(function(jqXHR, textStatus, errorThrown) {
if(errorThrown === 'abort') {
Files.cancelUpload(this.files[0].name);
OC.Notification.show(t('files', 'Upload cancelled.'));
}
});
uploadingFiles[uniqueName] = jqXHR;
}
delete uploadingFiles[data.files[0].name];
},
progress: function(e, data) {
// TODO: show nice progress bar in file row
},
progressall: function(e, data) {
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return;
}
var progress = (data.loaded/data.total)*100;
$('#uploadprogressbar').progressbar('value',progress);
},
/**
* called for every successful upload
* @param e
* @param data
*/
done:function(e, data) {
// handle different responses (json or body from iframe for ie)
var response;
if (typeof data.result === 'string') {
response = data.result;
} else {
//fetch response from iframe
response = data.result[0].body.innerText;
}
var result=$.parseJSON(response);
if(typeof result[0] !== 'undefined' && result[0].status === 'success') {
var file = result[0];
} else {
data.textStatus = 'servererror';
data.errorThrown = t('files', result.data.message);
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
}
var filename = result[0].originalname;
// delete jqXHR reference
if (typeof data.context !== 'undefined' && data.context.data('type') === 'dir') {
var dirName = data.context.data('file');
delete uploadingFiles[dirName][filename];
if ($.assocArraySize(uploadingFiles[dirName]) == 0) {
delete uploadingFiles[dirName];
}
}else{
data.submit().success(function(data, status) {
// in safari data is a string
response = jQuery.parseJSON(typeof data === 'string' ? data : data[0].body.innerText);
Files.updateMaxUploadFilesize(response);
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).data('id',file.id);
var size = $('tr').filterAttr('data-file',file.name).find('td.filesize').text();
if(size==t('files','Pending')){
var sizeElement = $('tr').filterAttr('data-file',file.name).find('td.filesize');
sizeElement.text(simpleFileSize(file.size));
sizeElement.attr('title',humanFileSize(file.size));
}
//TODO update file upload size limit
FileList.loadingDone(file.name, file.id);
} else {
//TODO Files.cancelUpload(/*where do we get the filename*/);
OC.Notification.show(t('files', response.data.message));
$('#fileList > tr').not('[data-mime]').fadeOut();
$('#fileList > tr').not('[data-mime]').remove();
}
});
} else {
delete uploadingFiles[filename];
}
}
},
fail: function(e, data) {
// TODO: cancel upload & display error notification
},
progress: function(e, data) {
// TODO: show nice progress bar in file row
},
progressall: function(e, data) {
//IE < 10 does not fire the necessary events for the progress bar.
if($.browser.msie && parseInt($.browser.version) < 10) {
return;
}
var progress = (data.loaded/data.total)*100;
$('#uploadprogressbar').progressbar('value',progress);
},
start: function(e, data) {
//IE < 10 does not fire the necessary events for the progress bar.
if($.browser.msie && parseInt($.browser.version) < 10) {
return;
}
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
if(data.dataType != 'iframe ') {
$('#upload input.stop').show();
}
},
stop: function(e, data) {
if(data.dataType != 'iframe ') {
$('#upload input.stop').hide();
}
//IE < 10 does not fire the necessary events for the progress bar.
if($.browser.msie && parseInt($.browser.version) < 10) {
return;
}
$('#uploadprogressbar').progressbar('value',100);
$('#uploadprogressbar').fadeOut();
}
})
});
},
/**
* called after last upload
* @param e
* @param data
*/
stop: function(e, data) {
if(data.dataType !== 'iframe') {
$('#uploadprogresswrapper input.stop').hide();
}
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return;
}
$('#uploadprogressbar').progressbar('value',100);
$('#uploadprogressbar').fadeOut();
}
})
});
}
$.assocArraySize = function(obj) {
// http://stackoverflow.com/a/6700/11236
@ -651,7 +548,7 @@ $(document).ready(function() {
}
localName = getUniqueName(localName);
//IE < 10 does not fire the necessary events for the progress bar.
if($.browser.msie && parseInt($.browser.version) < 10) {
if($('html.lte9').length > 0) {
} else {
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
@ -659,7 +556,8 @@ $(document).ready(function() {
var eventSource=new OC.EventSource(OC.filePath('files','ajax','newfile.php'),{dir:$('#dir').val(),source:name,filename:localName});
eventSource.listen('progress',function(progress){
if($.browser.msie && parseInt($.browser.version) < 10) {
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
} else {
$('#uploadprogressbar').progressbar('value',progress);
}
@ -885,7 +783,7 @@ var dragOptions={
}
}
// sane browsers support using the distance option
if ( ! $.browser.msie) {
if ( $('html.ie').length === 0) {
dragOptions['distance'] = 20;
}

Write Preview
Loading…
Cancel
Save