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

separate uploading code from progress code, add progress capability detection

This commit is contained in:
Jörn Friedrich Dreyer 2013-09-05 10:19:54 +02:00
parent 49fd7e9f1e
commit bbf8acb383
4 changed files with 136 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
apps/files/js/file-upload.js
View File

@ -14,6 +14,7 @@
* - when only existing -> remember as single skip action
* - when only new -> remember as single replace action
* - when both -> remember as single autorename action
* - continue -> apply marks, when nothing is marked continue == skip all
* - start uploading selection
*
* on send
@ -96,7 +97,30 @@
*
*/
// from https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html
// also see article at http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata
// Function that will allow us to know if Ajax uploads are supported
function supportAjaxUploadWithProgress() {
return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData();
// Is the File API supported?
function supportFileAPI() {
var fi = document.createElement('INPUT');
fi.type = 'file';
return 'files' in fi;
};
// Are progress events supported?
function supportAjaxUploadProgressEvents() {
var xhr = new XMLHttpRequest();
return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
};
// Is FormData supported?
function supportFormData() {
return !! window.FormData;
}
}
//TODO clean uploads when all progress has completed
OC.Upload = {
@ -245,6 +269,7 @@ OC.Upload = {
console.log(data);
},
checkExistingFiles: function (selection, callbacks){
// FIXME check filelist before uploading
callbacks.onNoConflicts(selection);
}
};
@ -327,7 +352,7 @@ $(document).ready(function() {
return false; //don't upload anything
}
// check existing files whan all is collected
// check existing files when all is collected
if ( selection.uploads.length >= selection.filesToUpload ) {
//remove our selection hack:
@ -358,11 +383,6 @@ $(document).ready(function() {
OC.Upload.checkExistingFiles(selection, callbacks);
//TODO refactor away:
//show cancel button
if($('html.lte9').length === 0 && data.dataType !== 'iframe') {
$('#uploadprogresswrapper input.stop').show();
}
}
@ -389,13 +409,6 @@ $(document).ready(function() {
*/
start: function(e) {
OC.Upload.logStatus('start', e, null);
//IE < 10 does not fire the necessary events for the progress bar.
if($('html.lte9').length > 0) {
return true;
}
$('#uploadprogresswrapper input.stop').show();
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
},
fail: function(e, data) {
OC.Upload.logStatus('fail', e, data);
@ -414,32 +427,6 @@ $(document).ready(function() {
}
//var selection = OC.Upload.getSelection(data.originalFiles);
//OC.Upload.deleteSelectionUpload(selection, data.files[0].name);
//if user pressed cancel hide upload progress bar and cancel button
if (data.errorThrown === 'abort') {
$('#uploadprogresswrapper input.stop').fadeOut();
$('#uploadprogressbar').fadeOut();
}
},
progress: function(e, data) {
OC.Upload.logStatus('progress', e, data);
// TODO: show nice progress bar in file row
},
/**
*
* @param {type} e
* @param {type} data (only has loaded, total and lengthComputable)
* @returns {unresolved}
*/
progressall: function(e, data) {
OC.Upload.logStatus('progressall', 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;
//var progress = OC.Upload.progressBytes();
$('#uploadprogressbar').progressbar('value', progress);
},
/**
* called for every successful upload
@ -460,33 +447,21 @@ $(document).ready(function() {
//var selection = OC.Upload.getSelection(data.originalFiles);
if(typeof result[0] !== 'undefined'
&& result[0].status === 'success'
&& result[0].status === 'existserror'
) {
//if (selection) {
// selection.loadedBytes+=data.loaded;
//}
//OC.Upload.nextUpload();
//show "file already exists" dialog
var original = result[0];
var replacement = data.files[0];
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
OC.dialogs.fileexists(data, original, replacement, OC.Upload, fu);
} else {
if (result[0].status === 'existserror') {
//show "file already exists" dialog
var original = result[0];
var replacement = data.files[0];
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
OC.dialogs.fileexists(data, original, replacement, OC.Upload, fu);
} else {
OC.Upload.deleteSelectionUpload(selection, data.files[0].name);
data.textStatus = 'servererror';
data.errorThrown = t('files', result.data.message);
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
}
OC.Upload.deleteSelectionUpload(selection, data.files[0].name);
data.textStatus = 'servererror';
data.errorThrown = t('files', result.data.message);
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
fu._trigger('fail', e, data);
}
//if user pressed cancel hide upload chrome
//if (! OC.Upload.isProcessing()) {
// $('#uploadprogresswrapper input.stop').fadeOut();
// $('#uploadprogressbar').fadeOut();
//}
},
/**
@ -496,36 +471,78 @@ $(document).ready(function() {
*/
stop: function(e, data) {
OC.Upload.logStatus('stop', e, data);
//if(OC.Upload.progressBytes()>=100) { //only hide controls when all selections have ended uploading
//OC.Upload.cancelUploads(); //cleanup
// 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();
//}
//if user pressed cancel hide upload chrome
//if (! OC.Upload.isProcessing()) {
// $('#uploadprogresswrapper input.stop').fadeOut();
// $('#uploadprogressbar').fadeOut();
//}
}
};
var file_upload_handler = function() {
$('#file_upload_start').fileupload(file_upload_param);
};
if ( document.getElementById('data-upload-form') ) {
$(file_upload_handler);
// initialize jquery fileupload (blueimp)
var fileupload = $('#file_upload_start').fileupload(file_upload_param);
if(supportAjaxUploadWithProgress()) {
// add progress handlers
fileupload.on('fileuploadadd', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadadd', e, data);
//show cancel button
//if(data.dataType !== 'iframe') { //FIXME when is iframe used? only for ie?
// $('#uploadprogresswrapper input.stop').show();
//}
});
// add progress handlers
fileupload.on('fileuploadstart', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadstart', e, data);
$('#uploadprogresswrapper input.stop').show();
$('#uploadprogressbar').progressbar({value:0});
$('#uploadprogressbar').fadeIn();
});
fileupload.on('fileuploadprogress', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadprogress', e, data);
//TODO progressbar in row
});
fileupload.on('fileuploadprogressall', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadprogressall', e, data);
var progress = (data.loaded / data.total) * 100;
$('#uploadprogressbar').progressbar('value', progress);
});
fileupload.on('fileuploaddone', function(e, data) {
OC.Upload.logStatus('progress handle fileuploaddone', e, data);
//if user pressed cancel hide upload chrome
//if (! OC.Upload.isProcessing()) {
// $('#uploadprogresswrapper input.stop').fadeOut();
// $('#uploadprogressbar').fadeOut();
//}
});
fileupload.on('fileuploadstop', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadstop', e, data);
//if(OC.Upload.progressBytes()>=100) { //only hide controls when all selections have ended uploading
//OC.Upload.cancelUploads(); //cleanup
// if(data.dataType !== 'iframe') {
// $('#uploadprogresswrapper input.stop').hide();
// }
// $('#uploadprogressbar').progressbar('value', 100);
// $('#uploadprogressbar').fadeOut();
//}
//if user pressed cancel hide upload chrome
//if (! OC.Upload.isProcessing()) {
// $('#uploadprogresswrapper input.stop').fadeOut();
// $('#uploadprogressbar').fadeOut();
//}
});
fileupload.on('fileuploadfail', function(e, data) {
OC.Upload.logStatus('progress handle fileuploadfail', e, data);
//if user pressed cancel hide upload progress bar and cancel button
if (data.errorThrown === 'abort') {
$('#uploadprogresswrapper input.stop').fadeOut();
$('#uploadprogressbar').fadeOut();
}
});
} else {
console.log('skipping file progress because your browser is broken');
}
}
$.assocArraySize = function(obj) {
// http://stackoverflow.com/a/6700/11236

20
apps/files/js/filelist.js
View File

@ -517,7 +517,7 @@ $(document).ready(function(){
var file_upload_start = $('#file_upload_start');
file_upload_start.on('fileuploaddrop', function(e, data) {
OC.Upload.logStatus('fileuploaddrop', e, data);
OC.Upload.logStatus('filelist handle fileuploaddrop', e, data);
var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder
@ -556,7 +556,7 @@ $(document).ready(function(){
});
file_upload_start.on('fileuploadadd', function(e, data) {
OC.Upload.logStatus('fileuploadadd', e, data);
OC.Upload.logStatus('filelist handle fileuploadadd', e, data);
// lookup selection for dir
var selection = OC.Upload.getSelection(data.originalFiles);
@ -592,10 +592,10 @@ $(document).ready(function(){
});
file_upload_start.on('fileuploadstart', function(e, data) {
OC.Upload.logStatus('fileuploadstart', e, data);
OC.Upload.logStatus('filelist handle fileuploadstart', e, data);
});
file_upload_start.on('fileuploaddone', function(e, data) {
OC.Upload.logStatus('fileuploaddone', e, data);
OC.Upload.logStatus('filelist handle fileuploaddone', e, data);
var response;
if (typeof data.result === 'string') {
@ -672,22 +672,22 @@ $(document).ready(function(){
});
file_upload_start.on('fileuploadalways', function(e, data) {
OC.Upload.logStatus('fileuploadalways', e, data);
OC.Upload.logStatus('filelist handle fileuploadalways', e, data);
});
file_upload_start.on('fileuploadsend', function(e, data) {
OC.Upload.logStatus('fileuploadsend', e, data);
OC.Upload.logStatus('filelist handle fileuploadsend', e, data);
// TODOD add vis
//data.context.element =
});
file_upload_start.on('fileuploadprogress', function(e, data) {
OC.Upload.logStatus('fileuploadprogress', e, data);
OC.Upload.logStatus('filelist handle fileuploadprogress', e, data);
});
file_upload_start.on('fileuploadprogressall', function(e, data) {
OC.Upload.logStatus('fileuploadprogressall', e, data);
OC.Upload.logStatus('filelist handle fileuploadprogressall', e, data);
});
file_upload_start.on('fileuploadstop', function(e, data) {
OC.Upload.logStatus('fileuploadstop', e, data);
OC.Upload.logStatus('filelist handle fileuploadstop', e, data);
//if user pressed cancel hide upload chrome
if (! OC.Upload.isProcessing()) {
@ -700,7 +700,7 @@ $(document).ready(function(){
}
});
file_upload_start.on('fileuploadfail', function(e, data) {
OC.Upload.logStatus('fileuploadfail', e, data);
OC.Upload.logStatus('filelist handle fileuploadfail', e, data);
//if user pressed cancel hide upload chrome
if (data.errorThrown === 'abort') {

32
apps/files/js/files.js
View File

@ -1,6 +1,6 @@
Files={
updateMaxUploadFilesize:function(response) {
if(response == undefined) {
if(response === undefined) {
return;
}
if(response.data !== undefined && response.data.uploadMaxFilesize !== undefined) {
@ -9,7 +9,7 @@ Files={
$('#usedSpacePercent').val(response.data.usedSpacePercent);
Files.displayStorageWarnings();
}
if(response[0] == undefined) {
if(response[0] === undefined) {
return;
}
if(response[0].uploadMaxFilesize !== undefined) {
@ -25,7 +25,7 @@ Files={
OC.Notification.show(t('files', '\'.\' is an invalid file name.'));
return false;
}
if (name.length == 0) {
if (name.length === 0) {
OC.Notification.show(t('files', 'File name cannot be empty.'));
return false;
}
@ -33,7 +33,7 @@ Files={
// check for invalid characters
var invalid_characters = ['\\', '/', '<', '>', ':', '"', '|', '?', '*'];
for (var i = 0; i < invalid_characters.length; i++) {
if (name.indexOf(invalid_characters[i]) != -1) {
if (name.indexOf(invalid_characters[i]) !== -1) {
OC.Notification.show(t('files', "Invalid name, '\\', '/', '<', '>', ':', '\"', '|', '?' and '*' are not allowed."));
return false;
}
@ -127,7 +127,7 @@ $(document).ready(function() {
var rows = $(this).parent().parent().parent().children('tr');
for (var i = start; i < end; i++) {
$(rows).each(function(index) {
if (index == i) {
if (index === i) {
var checkbox = $(this).children().children('input:checkbox');
$(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().addClass('selected');
@ -145,7 +145,7 @@ $(document).ready(function() {
$(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().toggleClass('selected');
var selectedCount=$('td.filename input:checkbox:checked').length;
if (selectedCount == $('td.filename input:checkbox').length) {
if (selectedCount === $('td.filename input:checkbox').length) {
$('#select_all').attr('checked', 'checked');
}
}
@ -192,7 +192,7 @@ $(document).ready(function() {
var rows = $(this).parent().parent().parent().children('tr');
for (var i = start; i < end; i++) {
$(rows).each(function(index) {
if (index == i) {
if (index === i) {
var checkbox = $(this).children().children('input:checkbox');
$(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().addClass('selected');
@ -205,7 +205,7 @@ $(document).ready(function() {
if(!$(this).attr('checked')){
$('#select_all').attr('checked',false);
}else{
if(selectedCount==$('td.filename input:checkbox').length){
if(selectedCount === $('td.filename input:checkbox').length){
$('#select_all').attr('checked',true);
}
}
@ -262,9 +262,9 @@ $(document).ready(function() {
function resizeBreadcrumbs(firstRun) {
var width = $(this).width();
if (width != lastWidth) {
if (width !== lastWidth) {
if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) {
if (hiddenBreadcrumbs == 0) {
if (hiddenBreadcrumbs === 0) {
breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
$(breadcrumbs[1]).find('a').hide();
$(breadcrumbs[1]).append('<span>...</span>');
@ -276,12 +276,12 @@ $(document).ready(function() {
breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth;
$(breadcrumbs[i]).hide();
hiddenBreadcrumbs = i;
i++
i++;
}
} else if (width > lastWidth && hiddenBreadcrumbs > 0) {
var i = hiddenBreadcrumbs;
while (width > breadcrumbsWidth && i > 0) {
if (hiddenBreadcrumbs == 1) {
if (hiddenBreadcrumbs === 1) {
breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
$(breadcrumbs[1]).find('span').remove();
$(breadcrumbs[1]).find('a').show();
@ -382,7 +382,7 @@ scanFiles.scanning=false;
function boolOperationFinished(data, callback) {
result = jQuery.parseJSON(data.responseText);
Files.updateMaxUploadFilesize(result);
if(result.status == 'success'){
if(result.status === 'success'){
callback.call();
} else {
alert(result.data.message);
@ -436,7 +436,7 @@ var createDragShadow = function(event){
});
return dragshadow;
}
};
//options for file drag/drop
var dragOptions={
@ -446,7 +446,7 @@ var dragOptions={
stop: function(event, ui) {
$('#fileList tr td.filename').addClass('ui-draggable');
}
}
};
// sane browsers support using the distance option
if ( $('html.ie').length === 0) {
dragOptions['distance'] = 20;
@ -489,7 +489,7 @@ var folderDropOptions={
});
},
tolerance: 'pointer'
}
};
var crumbDropOptions={
drop: function( event, ui ) {

13
core/js/oc-dialogs.js
View File

@ -257,13 +257,7 @@ var OCdialogs = {
//TODO add to same size collection?
}
//add checkbox toggling actions
conflict.find('.replacement,.original').on('click', function(){
var checkbox = $(this).find('input[type="checkbox"]');
checkbox.prop('checkbox', !checkbox.prop('checkbox'));
}).find('input[type="checkbox"]').prop('checkbox',false);
//TODO show skip action for files with same size and mtime
//TODO show skip action for files with same size and mtime in bottom row
};
var selection = controller.getSelection(data.originalFiles);
@ -345,11 +339,14 @@ var OCdialogs = {
var checkboxes = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]');
checkboxes.prop('checked', $(this).prop('checked'));
});
$(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() {
var checkbox = $(this).find('input[type="checkbox"]');
checkbox.prop('checked', !checkbox.prop('checked'));
});
$(dialog_id).find('.conflicts').on('click', 'input[type="checkbox"]', function() {
var checkbox = $(this);
checkbox.prop('checked', !checkbox.prop('checked'));
});
//update counters
$(dialog_id).on('click', '.replacement,.allnewfiles', function() {