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.js557
1 files changed, 418 insertions, 139 deletions
diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js
index aeb2da90d5f..b52221ac1fc 100644
--- a/apps/files/js/file-upload.js
+++ b/apps/files/js/file-upload.js
@@ -1,157 +1,436 @@
-$(document).ready(function() {
-
- var file_upload_param = {
- 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
- }
+/**
+ * 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
+ */
- var totalSize=0;
- $.each(data.originalFiles, function(i,file){
- totalSize+=file.size;
- });
+/**
+ * Function that will allow us to know if Ajax uploads are supported
+ * @link https://github.com/New-Bamboo/example-ajax-upload/blob/master/public/index.html
+ * also see article @link http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata
+ */
+function supportAjaxUploadWithProgress() {
+ return supportFileAPI() && supportAjaxUploadProgressEvents() && supportFormData();
- 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
- }
+ // Is the File API supported?
+ function supportFileAPI() {
+ var fi = document.createElement('INPUT');
+ fi.type = 'file';
+ return 'files' in fi;
+ };
- // start the actual file upload
- var jqXHR = data.submit();
+ // Are progress events supported?
+ function supportAjaxUploadProgressEvents() {
+ var xhr = new XMLHttpRequest();
+ return !! (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
+ };
- // 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;
- }
+ // Is FormData supported?
+ function supportFormData() {
+ return !! window.FormData;
+ }
+}
- //show cancel button
- if($('html.lte9').length === 0 && data.dataType !== 'iframe') {
- $('#uploadprogresswrapper input.stop').show();
- }
- },
- submit: function(e, data) {
- if ( ! data.formData ) {
- // noone set update parameters, we set the minimum
- data.formData = {
- requesttoken: oc_requesttoken,
- dir: $('#dir').val()
- };
- }
- },
- /**
- * 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;
+/**
+ * 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
}
- $('#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 {
- // HTTP connection problem
- $('#notification').text(data.errorThrown);
- }
- $('#notification').fadeIn();
- //hide notification after 5 sec
- setTimeout(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;
+ });
+ return deleted;
+ },
+ /**
+ * deletes the jqHXR object from a data selection
+ * @param {object} data
+ */
+ deleteUpload:function(data) {
+ delete data.jqXHR;
+ },
+ /**
+ * cancels all uploads
+ */
+ cancelUploads:function() {
+ this.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++;
}
- 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;
+ });
+ return count > 0;
+ },
+ /**
+ * callback for the conflicts dialog
+ * @param {object} data
+ */
+ onCancel:function(data) {
+ this.cancelUploads();
+ },
+ /**
+ * callback for the conflicts dialog
+ * calls onSkip, onReplace or onAutorename for each conflict
+ * @param {object} 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 {
- //fetch response from iframe
- response = data.result[0].body.innerText;
+ // when only original seleted -> skip
+ // when none selected -> skip
+ self.onSkip(conflict.data('data'));
}
- var result=$.parseJSON(response);
+ });
+ },
+ /**
+ * handle skipping an upload
+ * @param {object} data
+ */
+ onSkip:function(data){
+ this.log('skip', null, data);
+ this.deleteUpload(data);
+ },
+ /**
+ * handle replacing a file on the server with an uploaded file
+ * @param {object} data
+ */
+ onReplace:function(data){
+ this.log('replace', null, data);
+ data.data.append('resolution', 'replace');
+ data.submit();
+ },
+ /**
+ * handle uploading a file and letting the server decide a new name
+ * @param {object} data
+ */
+ onAutorename:function(data){
+ this.log('autorename', null, data);
+ if (data.data) {
+ data.data.append('resolution', 'autorename');
+ } else {
+ data.formData.push({name:'resolution',value:'autorename'}); //hack for ie8
+ }
+ data.submit();
+ },
+ _trace:false, //TODO implement log handler for JS per class?
+ log:function(caption, e, data) {
+ if (this._trace) {
+ 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 choose which files to keep
+ * @param {array} selection of files to upload
+ * @param {object} callbacks - object with several callback methods
+ * @param {function} callbacks.onNoConflicts
+ * @param {function} callbacks.onSkipConflicts
+ * @param {function} callbacks.onReplaceConflicts
+ * @param {function} callbacks.onChooseConflicts
+ * @param {function} callbacks.onCancel
+ */
+ checkExistingFiles: function (selection, callbacks){
+ // TODO check filelist before uploading and show dialog on conflicts, use callbacks
+ callbacks.onNoConflicts(selection);
+ }
+};
+
+$(document).ready(function() {
+
+ if ( $('#file_upload_start').exists() ) {
+
+ 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 {object} e
+ * @param {object} data
+ * @returns {boolean}
+ */
+ add: function(e, data) {
+ OC.Upload.log('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 {filename} as it is a directory or has 0 bytes',
+ {filename: file.name}
+ );
+ }
+
+ // 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');
+ }
+
+ // 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
+ }
- if(typeof result[0] !== 'undefined' && result[0].status === 'success') {
- var filename = result[0].originalname;
+ // check existing files when all is collected
+ if ( selection.uploads.length >= selection.filesToUpload ) {
+
+ //remove our selection hack:
+ delete data.originalFiles.selection;
+
+ 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();
+ });
+ }
+ };
- // 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];
+ OC.Upload.checkExistingFiles(selection, callbacks);
+
+ }
+
+ return true; // continue adding files
+ },
+ /**
+ * called after the first add, does NOT have the data param
+ * @param {object} e
+ */
+ start: function(e) {
+ OC.Upload.log('start', e, null);
+ },
+ submit: function(e, data) {
+ OC.Upload.rememberUpload(data);
+ if ( ! data.formData ) {
+ // noone set update parameters, we set the minimum
+ data.formData = {
+ requesttoken: oc_requesttoken,
+ dir: $('#dir').val()
+ };
+ }
+ },
+ fail: function(e, data) {
+ OC.Upload.log('fail', e, data);
+ if (typeof data.textStatus !== 'undefined' && data.textStatus !== 'success' ) {
+ if (data.textStatus === 'abort') {
+ $('#notification').text(t('files', 'Upload cancelled.'));
+ } else {
+ // HTTP connection problem
+ $('#notification').text(data.errorThrown);
}
+ $('#notification').fadeIn();
+ //hide notification after 5 sec
+ setTimeout(function() {
+ $('#notification').fadeOut();
+ }, 5000);
+ }
+ OC.Upload.deleteUpload(data);
+ },
+ /**
+ * called for every successful upload
+ * @param {object} e
+ * @param {object} data
+ */
+ done:function(e, data) {
+ OC.Upload.log('done', e, data);
+ // handle different responses (json or body from iframe for ie)
+ var response;
+ if (typeof data.result === 'string') {
+ response = data.result;
} else {
- delete uploadingFiles[filename];
+ //fetch response from iframe
+ response = data.result[0].body.innerText;
}
- 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);
- }
- },
- /**
- * called after last upload
- * @param e
- * @param data
- */
- stop: function(e, data) {
- if(data.dataType !== 'iframe') {
- $('#uploadprogresswrapper input.stop').hide();
- }
+ var result=$.parseJSON(response);
- //IE < 10 does not fire the necessary events for the progress bar.
- if($('html.lte9').length > 0) {
- return;
+ 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 = result.data.message; // error message has been translated on server
+ var fu = $(this).data('blueimp-fileupload') || $(this).data('fileupload');
+ fu._trigger('fail', e, data);
+ }
+ },
+ /**
+ * called after last upload
+ * @param {object} e
+ * @param {object} data
+ */
+ stop: function(e, data) {
+ OC.Upload.log('stop', e, data);
}
+ };
+
+ // initialize jquery fileupload (blueimp)
+ var fileupload = $('#file_upload_start').fileupload(file_upload_param);
+ window.file_upload_param = fileupload;
- $('#uploadprogressbar').progressbar('value',100);
- $('#uploadprogressbar').fadeOut();
+ if(supportAjaxUploadWithProgress()) {
+
+ // add progress handlers
+ fileupload.on('fileuploadadd', function(e, data) {
+ OC.Upload.log('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.log('progress handle fileuploadstart', e, data);
+ $('#uploadprogresswrapper input.stop').show();
+ $('#uploadprogressbar').progressbar({value:0});
+ $('#uploadprogressbar').fadeIn();
+ });
+ fileupload.on('fileuploadprogress', function(e, data) {
+ OC.Upload.log('progress handle fileuploadprogress', e, data);
+ //TODO progressbar in row
+ });
+ fileupload.on('fileuploadprogressall', function(e, data) {
+ OC.Upload.log('progress handle fileuploadprogressall', e, data);
+ var progress = (data.loaded / data.total) * 100;
+ $('#uploadprogressbar').progressbar('value', progress);
+ });
+ fileupload.on('fileuploadstop', function(e, data) {
+ OC.Upload.log('progress handle fileuploadstop', e, data);
+
+ $('#uploadprogresswrapper input.stop').fadeOut();
+ $('#uploadprogressbar').fadeOut();
+
+ });
+ fileupload.on('fileuploadfail', function(e, data) {
+ OC.Upload.log('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');
}
- };
- $('#file_upload_start').fileupload(file_upload_param);
-
+ }
+
$.assocArraySize = function(obj) {
// http://stackoverflow.com/a/6700/11236
var size = 0, key;
@@ -162,9 +441,9 @@ $(document).ready(function() {
};
// 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-30 18:09:47 +0000