aboutsummaryrefslogtreecommitdiffstats
path: root/apps/files/js/file-upload.js
diff options
context:
space:
mode:
Diffstat (limited to 'apps/files/js/file-upload.js')
-rw-r--r--apps/files/js/file-upload.js439
1 files changed, 354 insertions, 85 deletions
diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js
index 970aad1f978..e5b3f807580 100644
--- a/apps/files/js/file-upload.js
+++ b/apps/files/js/file-upload.js
@@ -1,64 +1,308 @@
+/**
+ * The file upload code uses several hooks to interact with blueimps jQuery file upload library:
+ * 1. the core upload handling hooks are added when initializing the plugin,
+ * 2. if the browser supports progress events they are added in a separate set after the initialization
+ * 3. every app can add it's own triggers for fileupload
+ * - files adds d'n'd handlers and also reacts to done events to add new rows to the filelist
+ * - TODO pictures upload button
+ * - TODO music upload button
+ */
+
+// 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;
+ }
+}
+
+/**
+ * keeps track of uploads in progress and implements callbacks for the conflicts dialog
+ * @type OC.Upload
+ */
+OC.Upload = {
+ _uploads: [],
+ /**
+ * cancels a single upload,
+ * @deprecated because it was only used when a file currently beeing uploaded was deleted. Now they are added after
+ * they have been uploaded.
+ * @param string dir
+ * @param string filename
+ * @returns unresolved
+ */
+ cancelUpload:function(dir, filename) {
+ var self = this;
+ var deleted = false;
+ //FIXME _selections
+ jQuery.each(this._uploads, function(i, jqXHR) {
+ if (selection.dir === dir && selection.uploads[filename]) {
+ deleted = self.deleteSelectionUpload(selection, filename);
+ return false; // end searching through selections
+ }
+ });
+ return deleted;
+ },
+ /**
+ * deletes the jqHXR object from a data selection
+ * @param data data
+ */
+ deleteUpload:function(data) {
+ delete data.jqXHR;
+ },
+ /**
+ * cancels all uploads
+ */
+ cancelUploads:function() {
+ console.log('canceling uploads');
+ jQuery.each(this._uploads,function(i, jqXHR){
+ jqXHR.abort();
+ });
+ this._uploads = [];
+ },
+ rememberUpload:function(jqXHR){
+ if (jqXHR) {
+ this._uploads.push(jqXHR);
+ }
+ },
+ /**
+ * Checks the currently known uploads.
+ * returns true if any hxr has the state 'pending'
+ * @returns Boolean
+ */
+ isProcessing:function(){
+ var count = 0;
+
+ jQuery.each(this._uploads,function(i, data){
+ if (data.state() === 'pending') {
+ count++;
+ }
+ });
+ return count > 0;
+ },
+ /**
+ * callback for the conflicts dialog
+ * @param data
+ */
+ onCancel:function(data) {
+ this.cancelUploads();
+ },
+ /**
+ * callback for the conflicts dialog
+ * calls onSkip, onReplace or onAutorename for each conflict
+ * @param conflicts list of conflict elements
+ */
+ onContinue:function(conflicts) {
+ var self = this;
+ //iterate over all conflicts
+ jQuery.each(conflicts, function (i, conflict) {
+ conflict = $(conflict);
+ var keepOriginal = conflict.find('.original input[type="checkbox"]:checked').length === 1;
+ var keepReplacement = conflict.find('.replacement input[type="checkbox"]:checked').length === 1;
+ if (keepOriginal && keepReplacement) {
+ // when both selected -> autorename
+ self.onAutorename(conflict.data('data'));
+ } else if (keepReplacement) {
+ // when only replacement selected -> overwrite
+ self.onReplace(conflict.data('data'));
+ } else {
+ // when only original seleted -> skip
+ // when none selected -> skip
+ self.onSkip(conflict.data('data'));
+ }
+ });
+ },
+ /**
+ * handle skipping an upload
+ * @param data data
+ */
+ onSkip:function(data){
+ this.logStatus('skip', null, data);
+ this.deleteUpload(data);
+ },
+ /**
+ * handle replacing a file on the server with an uploaded file
+ * @param data data
+ */
+ onReplace:function(data){
+ this.logStatus('replace', null, data);
+ data.data.append('resolution', 'replace');
+ data.submit();
+ },
+ /**
+ * handle uploading a file and letting the server decide a new name
+ * @param data data
+ */
+ onAutorename:function(data){
+ this.logStatus('autorename', null, data);
+ if (data.data) {
+ data.data.append('resolution', 'autorename');
+ } else {
+ data.formData.push({name:'resolution',value:'autorename'}); //hack for ie8
+ }
+ data.submit();
+ },
+ logStatus:function(caption, e, data) {
+ console.log(caption);
+ console.log(data);
+ },
+ /**
+ * TODO checks the list of existing files prior to uploading and shows a simple dialog to choose
+ * skip all, replace all or choosw which files to keep
+ * @param array selection of files to upload
+ * @param callbacks to call:
+ * onNoConflicts,
+ * onSkipConflicts,
+ * onReplaceConflicts,
+ * onChooseConflicts,
+ * onCancel
+ */
+ checkExistingFiles: function (selection, callbacks){
+ // TODO check filelist before uploading and show dialog on conflicts, use callbacks
+ callbacks.onNoConflicts(selection);
+ }
+};
+
$(document).ready(function() {
var file_upload_param = {
dropZone: $('#content'), // restrict dropZone to content div
+ autoUpload: false,
+ sequentialUploads: true,
//singleFileUploads is on by default, so the data.files array will always have length 1
+ /**
+ * on first add of every selection
+ * - check all files of originalFiles array with files in dir
+ * - on conflict show dialog
+ * - skip all -> remember as single skip action for all conflicting files
+ * - replace all -> remember as single replace action for all conflicting files
+ * - choose -> show choose dialog
+ * - mark files to keep
+ * - when only existing -> remember as single skip action
+ * - when only new -> remember as single replace action
+ * - when both -> remember as single autorename action
+ * - start uploading selection
+ * @param {type} e
+ * @param {type} data
+ * @returns {Boolean}
+ */
add: function(e, data) {
-
- if(data.files[0].type === '' && data.files[0].size == 4096)
- {
+ OC.Upload.logStatus('add', e, data);
+ var that = $(this);
+
+ // we need to collect all data upload objects before starting the upload so we can check their existence
+ // and set individual conflict actions. unfortunately there is only one variable that we can use to identify
+ // the selection a data upload is part of, so we have to collect them in data.originalFiles
+ // turning singleFileUploads off is not an option because we want to gracefully handle server errors like
+ // already exists
+
+ // create a container where we can store the data objects
+ if ( ! data.originalFiles.selection ) {
+ // initialize selection and remember number of files to upload
+ data.originalFiles.selection = {
+ uploads: [],
+ filesToUpload: data.originalFiles.length,
+ totalBytes: 0
+ };
+ }
+ var selection = data.originalFiles.selection;
+
+ // add uploads
+ if ( selection.uploads.length < selection.filesToUpload ){
+ // remember upload
+ selection.uploads.push(data);
+ }
+
+ //examine file
+ var file = data.files[0];
+
+ if (file.type === '' && file.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
+ data.errorThrown = t('files', 'Unable to upload {filename} as it is a directory or has 0 bytes',
+ {filename: file.name}
+ );
}
-
- var totalSize=0;
- $.each(data.originalFiles, function(i,file){
- totalSize+=file.size;
- });
-
- if(totalSize>$('#max_upload').val()){
+
+ // add size
+ selection.totalBytes += file.size;
+
+ //check max upload size
+ if (selection.totalBytes > $('#max_upload').val()) {
data.textStatus = 'notenoughspace';
- data.errorThrown = t('files','Not enough space available');
- var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
+ data.errorThrown = t('files', 'Not enough space available');
+ }
+
+ // end upload for whole selection on error
+ if (data.errorThrown) {
+ // trigger fileupload fail
+ var fu = that.data('blueimp-fileupload') || that.data('fileupload');
fu._trigger('fail', e, data);
return false; //don't upload anything
}
- // start the actual file upload
- var jqXHR = data.submit();
+ // check existing files when all is collected
+ if ( selection.uploads.length >= selection.filesToUpload ) {
+
+ //remove our selection hack:
+ delete data.originalFiles.selection;
- // 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] = {};
- }
- uploadingFiles[dirName][data.files[0].name] = jqXHR;
- } else {
- uploadingFiles[data.files[0].name] = jqXHR;
- }
+ var callbacks = {
+
+ onNoConflicts: function (selection) {
+ $.each(selection.uploads, function(i, upload) {
+ upload.submit();
+ });
+ },
+ onSkipConflicts: function (selection) {
+ //TODO mark conflicting files as toskip
+ },
+ onReplaceConflicts: function (selection) {
+ //TODO mark conflicting files as toreplace
+ },
+ onChooseConflicts: function (selection) {
+ //TODO mark conflicting files as chosen
+ },
+ onCancel: function (selection) {
+ $.each(selection.uploads, function(i, upload) {
+ upload.abort();
+ });
+ }
+ };
- //show cancel button
- if($('html.lte9').length === 0 && data.dataType !== 'iframe') {
- $('#uploadprogresswrapper input.stop').show();
+ OC.Upload.checkExistingFiles(selection, callbacks);
+
}
+
+ return true; // continue adding files
},
/**
* 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();
+ OC.Upload.logStatus('start', e, null);
+ },
+ submit: function (e, data) {
+ OC.Upload.rememberUpload(data);
},
fail: function(e, data) {
+ OC.Upload.logStatus('fail', e, data);
if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) {
if (data.textStatus === 'abort') {
$('#notification').text(t('files', 'Upload cancelled.'));
@@ -72,18 +316,7 @@ $(document).ready(function() {
$('#notification').fadeOut();
}, 5000);
}
- 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);
+ OC.Upload.deleteUpload(data);
},
/**
* called for every successful upload
@@ -91,6 +324,7 @@ $(document).ready(function() {
* @param data
*/
done:function(e, data) {
+ OC.Upload.logStatus('done', e, data);
// handle different responses (json or body from iframe for ie)
var response;
if (typeof data.result === 'string') {
@@ -101,21 +335,21 @@ $(document).ready(function() {
}
var result=$.parseJSON(response);
- if(typeof result[0] !== 'undefined' && result[0].status === 'success') {
- 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 {
- delete uploadingFiles[filename];
- }
- var file = result[0];
- } else {
+ delete data.jqXHR;
+
+ if(typeof result[0] === 'undefined') {
+ data.textStatus = 'servererror';
+ data.errorThrown = t('files', 'Could not get result from server.');
+ var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
+ fu._trigger('fail', e, data);
+ } 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 if (result[0].status !== 'success') {
+ //delete data.jqXHR;
data.textStatus = 'servererror';
data.errorThrown = t('files', result.data.message);
var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
@@ -128,41 +362,76 @@ $(document).ready(function() {
* @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();
+ OC.Upload.logStatus('stop', e, data);
}
};
- 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);
+ window.file_upload_param = fileupload;
+
+ 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('fileuploadstop', function(e, data) {
+ OC.Upload.logStatus('progress handle fileuploadstop', e, data);
+
+ $('#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
var size = 0, key;
for (key in obj) {
- if (obj.hasOwnProperty(key)) size++;
+ if (obj.hasOwnProperty(key)) {
+ size++;
+ }
}
return size;
};
// warn user not to leave the page while upload is in progress
- $(window).bind('beforeunload', function(e) {
- if ($.assocArraySize(uploadingFiles) > 0) {
- return t('files','File upload is in progress. Leaving the page now will cancel the upload.');
+ $(window).on('beforeunload', function(e) {
+ if (OC.Upload.isProcessing()) {
+ return t('files', 'File upload is in progress. Leaving the page now will cancel the upload.');
}
});
generated by cgit v1.2.3 (git 2.39.1) at 2025-05-09 09:08:07 +0000