Browse Source

separate uploading code from progress code, add progress capability detection

tags/v6.0.0alpha2
Jörn Friedrich Dreyer 10 years ago
parent
commit
bbf8acb383
4 changed files with 136 additions and 122 deletions
  1. 105
    88
      apps/files/js/file-upload.js
  2. 10
    10
      apps/files/js/filelist.js
  3. 16
    16
      apps/files/js/files.js
  4. 5
    8
      core/js/oc-dialogs.js

+ 105
- 88
apps/files/js/file-upload.js View File

* - when only existing -> remember as single skip action * - when only existing -> remember as single skip action
* - when only new -> remember as single replace action * - when only new -> remember as single replace action
* - when both -> remember as single autorename action * - when both -> remember as single autorename action
* - continue -> apply marks, when nothing is marked continue == skip all
* - start uploading selection * - start uploading selection
* *
* on send * on send
* *
*/ */


// 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 //TODO clean uploads when all progress has completed
OC.Upload = { OC.Upload = {
console.log(data); console.log(data);
}, },
checkExistingFiles: function (selection, callbacks){ checkExistingFiles: function (selection, callbacks){
// FIXME check filelist before uploading
callbacks.onNoConflicts(selection); callbacks.onNoConflicts(selection);
} }
}; };
return false; //don't upload anything 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 ) { if ( selection.uploads.length >= selection.filesToUpload ) {
//remove our selection hack: //remove our selection hack:


OC.Upload.checkExistingFiles(selection, callbacks); OC.Upload.checkExistingFiles(selection, callbacks);
//TODO refactor away:
//show cancel button
if($('html.lte9').length === 0 && data.dataType !== 'iframe') {
$('#uploadprogresswrapper input.stop').show();
}
} }
*/ */
start: function(e) { start: function(e) {
OC.Upload.logStatus('start', e, null); 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) { fail: function(e, data) {
OC.Upload.logStatus('fail', e, data); OC.Upload.logStatus('fail', e, data);
} }
//var selection = OC.Upload.getSelection(data.originalFiles); //var selection = OC.Upload.getSelection(data.originalFiles);
//OC.Upload.deleteSelectionUpload(selection, data.files[0].name); //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 * called for every successful upload
//var selection = OC.Upload.getSelection(data.originalFiles); //var selection = OC.Upload.getSelection(data.originalFiles);


if(typeof result[0] !== 'undefined' 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 { } 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();
//}


}, },
/** /**
*/ */
stop: function(e, data) { stop: function(e, data) {
OC.Upload.logStatus('stop', 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') ) { 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) { $.assocArraySize = function(obj) {
// http://stackoverflow.com/a/6700/11236 // http://stackoverflow.com/a/6700/11236

+ 10
- 10
apps/files/js/filelist.js View File

var file_upload_start = $('#file_upload_start'); var file_upload_start = $('#file_upload_start');
file_upload_start.on('fileuploaddrop', function(e, data) { 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'); var dropTarget = $(e.originalEvent.target).closest('tr');
if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder if(dropTarget && dropTarget.data('type') === 'dir') { // drag&drop upload to folder
}); });
file_upload_start.on('fileuploadadd', function(e, data) { 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 // lookup selection for dir
var selection = OC.Upload.getSelection(data.originalFiles); var selection = OC.Upload.getSelection(data.originalFiles);
}); });
file_upload_start.on('fileuploadstart', function(e, data) { 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) { file_upload_start.on('fileuploaddone', function(e, data) {
OC.Upload.logStatus('fileuploaddone', e, data);
OC.Upload.logStatus('filelist handle fileuploaddone', e, data);
var response; var response;
if (typeof data.result === 'string') { if (typeof data.result === 'string') {
}); });
file_upload_start.on('fileuploadalways', function(e, data) { 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) { 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 // TODOD add vis
//data.context.element = //data.context.element =
}); });
file_upload_start.on('fileuploadprogress', function(e, data) { 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) { 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) { 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 user pressed cancel hide upload chrome
if (! OC.Upload.isProcessing()) { if (! OC.Upload.isProcessing()) {
} }
}); });
file_upload_start.on('fileuploadfail', function(e, data) { 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 user pressed cancel hide upload chrome
if (data.errorThrown === 'abort') { if (data.errorThrown === 'abort') {

+ 16
- 16
apps/files/js/files.js View File

Files={ Files={
updateMaxUploadFilesize:function(response) { updateMaxUploadFilesize:function(response) {
if(response == undefined) {
if(response === undefined) {
return; return;
} }
if(response.data !== undefined && response.data.uploadMaxFilesize !== undefined) { if(response.data !== undefined && response.data.uploadMaxFilesize !== undefined) {
$('#usedSpacePercent').val(response.data.usedSpacePercent); $('#usedSpacePercent').val(response.data.usedSpacePercent);
Files.displayStorageWarnings(); Files.displayStorageWarnings();
} }
if(response[0] == undefined) {
if(response[0] === undefined) {
return; return;
} }
if(response[0].uploadMaxFilesize !== undefined) { if(response[0].uploadMaxFilesize !== undefined) {
OC.Notification.show(t('files', '\'.\' is an invalid file name.')); OC.Notification.show(t('files', '\'.\' is an invalid file name.'));
return false; return false;
} }
if (name.length == 0) {
if (name.length === 0) {
OC.Notification.show(t('files', 'File name cannot be empty.')); OC.Notification.show(t('files', 'File name cannot be empty.'));
return false; return false;
} }
// check for invalid characters // check for invalid characters
var invalid_characters = ['\\', '/', '<', '>', ':', '"', '|', '?', '*']; var invalid_characters = ['\\', '/', '<', '>', ':', '"', '|', '?', '*'];
for (var i = 0; i < invalid_characters.length; i++) { 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.")); OC.Notification.show(t('files', "Invalid name, '\\', '/', '<', '>', ':', '\"', '|', '?' and '*' are not allowed."));
return false; return false;
} }
var rows = $(this).parent().parent().parent().children('tr'); var rows = $(this).parent().parent().parent().children('tr');
for (var i = start; i < end; i++) { for (var i = start; i < end; i++) {
$(rows).each(function(index) { $(rows).each(function(index) {
if (index == i) {
if (index === i) {
var checkbox = $(this).children().children('input:checkbox'); var checkbox = $(this).children().children('input:checkbox');
$(checkbox).attr('checked', 'checked'); $(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().addClass('selected'); $(checkbox).parent().parent().addClass('selected');
$(checkbox).attr('checked', 'checked'); $(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().toggleClass('selected'); $(checkbox).parent().parent().toggleClass('selected');
var selectedCount=$('td.filename input:checkbox:checked').length; 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'); $('#select_all').attr('checked', 'checked');
} }
} }
var rows = $(this).parent().parent().parent().children('tr'); var rows = $(this).parent().parent().parent().children('tr');
for (var i = start; i < end; i++) { for (var i = start; i < end; i++) {
$(rows).each(function(index) { $(rows).each(function(index) {
if (index == i) {
if (index === i) {
var checkbox = $(this).children().children('input:checkbox'); var checkbox = $(this).children().children('input:checkbox');
$(checkbox).attr('checked', 'checked'); $(checkbox).attr('checked', 'checked');
$(checkbox).parent().parent().addClass('selected'); $(checkbox).parent().parent().addClass('selected');
if(!$(this).attr('checked')){ if(!$(this).attr('checked')){
$('#select_all').attr('checked',false); $('#select_all').attr('checked',false);
}else{ }else{
if(selectedCount==$('td.filename input:checkbox').length){
if(selectedCount === $('td.filename input:checkbox').length){
$('#select_all').attr('checked',true); $('#select_all').attr('checked',true);
} }
} }


function resizeBreadcrumbs(firstRun) { function resizeBreadcrumbs(firstRun) {
var width = $(this).width(); var width = $(this).width();
if (width != lastWidth) {
if (width !== lastWidth) {
if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) { if ((width < lastWidth || firstRun) && width < breadcrumbsWidth) {
if (hiddenBreadcrumbs == 0) {
if (hiddenBreadcrumbs === 0) {
breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
$(breadcrumbs[1]).find('a').hide(); $(breadcrumbs[1]).find('a').hide();
$(breadcrumbs[1]).append('<span>...</span>'); $(breadcrumbs[1]).append('<span>...</span>');
breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth; breadcrumbsWidth -= $(breadcrumbs[i]).get(0).offsetWidth;
$(breadcrumbs[i]).hide(); $(breadcrumbs[i]).hide();
hiddenBreadcrumbs = i; hiddenBreadcrumbs = i;
i++
i++;
} }
} else if (width > lastWidth && hiddenBreadcrumbs > 0) { } else if (width > lastWidth && hiddenBreadcrumbs > 0) {
var i = hiddenBreadcrumbs; var i = hiddenBreadcrumbs;
while (width > breadcrumbsWidth && i > 0) { while (width > breadcrumbsWidth && i > 0) {
if (hiddenBreadcrumbs == 1) {
if (hiddenBreadcrumbs === 1) {
breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth; breadcrumbsWidth -= $(breadcrumbs[1]).get(0).offsetWidth;
$(breadcrumbs[1]).find('span').remove(); $(breadcrumbs[1]).find('span').remove();
$(breadcrumbs[1]).find('a').show(); $(breadcrumbs[1]).find('a').show();
function boolOperationFinished(data, callback) { function boolOperationFinished(data, callback) {
result = jQuery.parseJSON(data.responseText); result = jQuery.parseJSON(data.responseText);
Files.updateMaxUploadFilesize(result); Files.updateMaxUploadFilesize(result);
if(result.status == 'success'){
if(result.status === 'success'){
callback.call(); callback.call();
} else { } else {
alert(result.data.message); alert(result.data.message);
}); });


return dragshadow; return dragshadow;
}
};


//options for file drag/drop //options for file drag/drop
var dragOptions={ var dragOptions={
stop: function(event, ui) { stop: function(event, ui) {
$('#fileList tr td.filename').addClass('ui-draggable'); $('#fileList tr td.filename').addClass('ui-draggable');
} }
}
};
// sane browsers support using the distance option // sane browsers support using the distance option
if ( $('html.ie').length === 0) { if ( $('html.ie').length === 0) {
dragOptions['distance'] = 20; dragOptions['distance'] = 20;
}); });
}, },
tolerance: 'pointer' tolerance: 'pointer'
}
};


var crumbDropOptions={ var crumbDropOptions={
drop: function( event, ui ) { drop: function( event, ui ) {

+ 5
- 8
core/js/oc-dialogs.js View File

//TODO add to same size collection? //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); var selection = controller.getSelection(data.originalFiles);
var checkboxes = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]'); var checkboxes = $(dialog_id).find('.conflict:not(.template) .original input[type="checkbox"]');
checkboxes.prop('checked', $(this).prop('checked')); checkboxes.prop('checked', $(this).prop('checked'));
}); });
$(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() { $(dialog_id).find('.conflicts').on('click', '.replacement,.original', function() {
var checkbox = $(this).find('input[type="checkbox"]'); var checkbox = $(this).find('input[type="checkbox"]');
checkbox.prop('checked', !checkbox.prop('checked')); 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 //update counters
$(dialog_id).on('click', '.replacement,.allnewfiles', function() { $(dialog_id).on('click', '.replacement,.allnewfiles', function() {

Loading…
Cancel
Save