separate uploading code from progress code, add progress capability detection

3 files changed, 131 insertions, 114 deletions

diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js
index be3d7e08aff..bd0ae4db00b 100644
--- a/apps/files/js/file-upload.js
+++ b/apps/files/js/file-upload.js
@@ -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
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 31e2a8300e2..4f20d1940aa 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -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') {
diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index 9a725fc2077..4a6c9c78900 100644
--- a/apps/files/js/files.js
+++ b/apps/files/js/files.js
@@ -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 ) {