improve file upload performance: start uploading next file only after the previous finished, make sure to not return when uploading via ajax

1 files changed, 60 insertions, 47 deletions

diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 928ce8689..08fdbd677 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -402,74 +402,87 @@ $(document).ready(function () {
 function UploadInit() {
 
 	var submit = $("#upload-submit");
-	var count = 1;
+	var idx = 0;
 	var filedrag = $(".cloud-index.attach-drop");
+	var reload = false;
 
 	$('#invisible-cloud-file-upload').fileupload({
-			url: 'file_upload',
-			dataType: 'json',
-			dropZone: filedrag,
-			maxChunkSize: 4 * 1024 * 1024,
-
-			add: function(e,data) {
-				$(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
-
-				var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []);
-				var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []);
-				var deny_cid  = ($('#ajax-upload-files').data('deny_cid') || []);
-				var deny_gid  = ($('#ajax-upload-files').data('deny_gid') || []);
-
-				$('.acl-field').remove();
-
-				$(allow_gid).each(function(i,v) {
-					$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
-				});
-				$(allow_cid).each(function(i,v) {
-					$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
-				});
-				$(deny_gid).each(function(i,v) {
-					$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
-				});
-				$(deny_cid).each(function(i,v) {
-					$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
-				});
-
-				data.formData = $('#ajax-upload-files').serializeArray();
-				data.submit();
-			},
+		url: 'file_upload',
+		dataType: 'json',
+		dropZone: filedrag,
+		maxChunkSize: 4 * 1024 * 1024,
+		add: function(e,data) {
+
+			idx++;
+			data.files[0].idx = idx;
+			prepareHtml(data.files[0]);
 
+			var allow_cid = ($('#ajax-upload-files').data('allow_cid') || []);
+			var allow_gid = ($('#ajax-upload-files').data('allow_gid') || []);
+			var deny_cid  = ($('#ajax-upload-files').data('deny_cid') || []);
+			var deny_gid  = ($('#ajax-upload-files').data('deny_gid') || []);
 
-			progress: function(e,data) {
+			$('.acl-field').remove();
+
+			$(allow_gid).each(function(i,v) {
+				$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
+			});
+			$(allow_cid).each(function(i,v) {
+				$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
+			});
+			$(deny_gid).each(function(i,v) {
+				$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
+			});
+			$(deny_cid).each(function(i,v) {
+				$('#ajax-upload-files').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
+			});
 
-				// there will only be one file, the one we are looking for
+			data.formData = $('#ajax-upload-files').serializeArray();
 
-				$(data.files).each( function() {
-					var idx = this.count;
+			// trick it into not uploadiong all files at once
+			$('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () {
+				data.submit();
+			});
 
-					// Dynamically update the percentage complete displayed in the file upload list
-					$('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%');
-					$('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
+			$('#new-upload-1').trigger('fileupload_trigger');
+		},
 
-				});
+		progress: function(e,data) {
+			var id = data.files[0].idx;
+			if(data.loaded == data.total) {
+				if(id == data.originalFiles.length) {
+					reload = true;
+				}
+				else {
+					// trigger uploading the next file
+					var next_id = id + 1;
+					setTimeout(function(){ $('#new-upload-' + next_id).trigger('fileupload_trigger'); }, 1000);
+				}
+			}
 
+			// Dynamically update the percentage complete displayed in the file upload list
+			$('#upload-progress-' + id).html(Math.round(data.loaded / data.total * 100) + '%');
+			$('#upload-progress-bar-' + id).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
 
-			},
+		},
 
-			stop: function(e,data) {
+		stop: function(e,data) {
+			if(reload) {
+				console.log('Upload completed');
 				window.location.href = window.location.href;
 			}
+		}
+	});
 
-		});
-
-		$('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click'); return false;});
+	$('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click');});
 
 }
 
 
 
 function prepareHtml(f) {
-	var num = f.count - 1;
-	var i = f.count;
+	var num = f.idx - 1;
+	var i = f.idx;
 	$('#cloud-index #new-upload-progress-bar-' + num.toString()).after(
 		'<tr id="new-upload-' + i + '" class="new-upload">' +
 		'<td></td>' +