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

4 files changed, 144 insertions, 246 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>' +
diff --git a/view/js/mod_photos.js b/view/js/mod_photos.js
index 1ce410a1b..faf14982b 100644
--- a/view/js/mod_photos.js
+++ b/view/js/mod_photos.js
@@ -20,151 +20,96 @@ function UploadInit() {
 	var fileselect = $("#photos-upload-choose");
 	var filedrag = $("#photos-upload-form");
 	var submit = $("#dbtn-submit");
-	var count = 1;
-
-   $('#invisible-photos-file-upload').fileupload({
-            url: 'photos/' + nickname,
-            dataType: 'json',
-            dropZone: filedrag,
-            maxChunkSize: 4 * 1024 * 1024,
-
-            add: function(e,data) {
-                $(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
-
-                var allow_cid = ($('#photos-upload-form').data('allow_cid') || []);
-                var allow_gid = ($('#photos-upload-form').data('allow_gid') || []);
-                var deny_cid  = ($('#photos-upload-form').data('deny_cid') || []);
-                var deny_gid  = ($('#photos-upload-form').data('deny_gid') || []);
-
-                $('.acl-field').remove();
-
-                $(allow_gid).each(function(i,v) {
-                    $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
-                });
-                $(allow_cid).each(function(i,v) {
-                    $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
-                });
-                $(deny_gid).each(function(i,v) {
-                    $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
-                });
-                $(deny_cid).each(function(i,v) {
-                    $('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
-                });
-
-                data.formData = $('#photos-upload-form').serializeArray();
-
-                data.submit();
-            },
-
-           progress: function(e,data) {
-
-                // there will only be one file, the one we are looking for
-
-                $(data.files).each( function() {
-                    var idx = this.count;
-
-                    // 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) + '%');
-
-                });
-
-
-            },
-
-
-            stop: function(e,data) {
-                window.location.href = window.location.href;
-            }
-
-        });
-
-        $('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;});
-
-
-
-
-	// is XHR2 available?
-//	var xhr = new XMLHttpRequest();
-//	if (xhr.upload) {
-
-		// file select
-//		fileselect.attr("multiple", 'multiple');
-//		fileselect.on("change", UploadFileSelectHandler);
-
-		// file submit
-//		submit.on("click", fileselect, UploadFileSelectHandler);
-
-		// file drop
-//		filedrag.on("dragover", DragDropUploadFileHover);
-//		filedrag.on("dragleave", DragDropUploadFileHover);
-//		filedrag.on("drop", DragDropUploadFileSelectHandler);
-//	}
-
-//	window.filesToUpload = 0;
-//	window.fileUploadsCompleted = 0;
-}
-
-// file drag hover
-function DragDropUploadFileHover(e) {
-	e.stopPropagation();
-	e.preventDefault();
-	e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
-}
-
-// file selection via drag/drop
-function DragDropUploadFileSelectHandler(e) {
-	// cancel event and hover styling
-	DragDropUploadFileHover(e);
-
-	// fetch FileList object
-	var files = e.target.files || e.originalEvent.dataTransfer.files;
-
-	$('.new-upload').remove();
-
-	// process all File objects
-	for (var i = 0, f; f = files[i]; i++) {
-		prepareHtml(f, i);
-		UploadFile(f, i);
-	}
-}
+	var idx = 0;
+	var reload = false;
+
+
+	$('#invisible-photos-file-upload').fileupload({
+		url: 'photos/' + nickname,
+		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 = ($('#photos-upload-form').data('allow_cid') || []);
+			var allow_gid = ($('#photos-upload-form').data('allow_gid') || []);
+			var deny_cid  = ($('#photos-upload-form').data('deny_cid') || []);
+			var deny_gid  = ($('#photos-upload-form').data('deny_gid') || []);
+
+			$('.acl-field').remove();
+
+			$(allow_gid).each(function(i,v) {
+				$('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_allow[]' value='"+v+"'>");
+			});
+			$(allow_cid).each(function(i,v) {
+				$('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_allow[]' value='"+v+"'>");
+			});
+			$(deny_gid).each(function(i,v) {
+				$('#photos-upload-form').append("<input class='acl-field' type='hidden' name='group_deny[]' value='"+v+"'>");
+			});
+			$(deny_cid).each(function(i,v) {
+				$('#photos-upload-form').append("<input class='acl-field' type='hidden' name='contact_deny[]' value='"+v+"'>");
+			});
+
+			data.formData = $('#photos-upload-form').serializeArray();
+
+			// trick it into not uploadiong all files at once
+			$('#new-upload-' + data.files[0].idx).one('fileupload_trigger', function () {
+				data.submit();
+			});
+
+			$('#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) {
+			if(reload) {
+				console.log('Upload completed');
+				window.location.href = window.location.href;
+			}
+		}
+	});
 
-// file selection via input
-function UploadFileSelectHandler(e) {
-	// fetch FileList object
-	if(e.target.id === 'dbtn-submit') {
-		e.preventDefault();
-		var files = e.data[0].files;
-	}
-	if(e.target.id === 'photos-upload-choose') {
-		$('.new-upload').remove();
-		var files = e.target.files;
-	}
+	$('#dbtn-submit').click(function(event) { event.preventDefault(); $('#invisible-photos-file-upload').trigger('click'); return false;});
 
-	// process all File objects
-	for (var i = 0, f; f = files[i]; i++) {
-		if(e.target.id === 'photos-upload-choose')
-			prepareHtml(f, i);
-		if(e.target.id === 'dbtn-submit') {
-			UploadFile(f, i);
-		}
-	}
 }
 
 function prepareHtml(f) {
-
-	var num = f.count - 1;
-	var i = f.count;
-
+	var num = f.idx - 1;
+	var i = f.idx;
 	$('#upload-index #new-upload-progress-bar-' + num.toString()).after(
 		'<tr id="new-upload-' + i + '" class="new-upload">' +
-		'<td width="1%"><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
-		'<td width="96%">' + f.name + '</td>' +
-		'<td id="upload-progress-' + i + '" width="1%"></td>' +
-		'<td class="d-none d-md-table-cell" width="1%">' + formatSizeUnits(f.size) + '</td>' +
+		'<td></td>' +
+		'<td><i class="fa fa-fw ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
+		'<td>' + f.name + '</td>' +
+		'<td id="upload-progress-' + i + '"></td><td></td><td></td>' +
+		'<td class="d-none d-md-table-cell">' + formatSizeUnits(f.size) + '</td><td class="d-none d-md-table-cell"></td>' +
 		'</tr>' +
 		'<tr id="new-upload-progress-bar-' + i + '" class="new-upload">' +
-		'<td id="upload-progress-bar-' + i + '" colspan="4" class="upload-progress-bar"></td>' +
+		'<td id="upload-progress-bar-' + i + '" colspan="9" class="upload-progress-bar"></td>' +
 		'</tr>'
 	);
 }
@@ -224,63 +169,3 @@ function getIconFromType(type) {
 
 	return iconFromType;
 }
-
-// upload  files
-function UploadFile(file, idx) {
-
-	window.filesToUpload = window.filesToUpload + 1;
-
-	var xhr = new XMLHttpRequest();
-
-	xhr.withCredentials = true;   // Include the SESSION cookie info for authentication
-
-	(xhr.upload || xhr).addEventListener('progress', function (e) {
-
-		var done = e.position || e.loaded;
-		var total = e.totalSize || e.total;
-		// Dynamically update the percentage complete displayed in the file upload list
-		$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
-		$('#upload-progress-bar-' + idx).css('background-size', Math.round(done / total * 100) + '%');
-
-		if(done == total) {
-			$('#upload-progress-' + idx).html('Processing...');
-		}
-
-	});
-
-
-	xhr.addEventListener('load', function (e) {
-		//we could possibly turn the filenames to real links here and add the delete and edit buttons to avoid page reload...
-		$('#upload-progress-' + idx).html('Ready!');
-
-		//console.log('xhr upload complete', e);
-		window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
-
-		// When all the uploads have completed, refresh the page
-		if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
-
-			window.fileUploadsCompleted = window.filesToUpload = 0;
-
-			// After uploads complete, refresh browser window to display new files
-			window.location.href = window.location.href;
-		}
-	});
-
-
-	xhr.addEventListener('error', function (e) {
-		$('#upload-progress-' + idx).html('<span style="color: red;">ERROR</span>');
-	});
-
-	// POST to the entire cloud path
-	xhr.open('post', $('#photos-upload-form').attr( 'action' ), true);
-
-	var formfields = $("#photos-upload-form").serializeArray();
-
-	var data = new FormData();
-	$.each(formfields, function(i, field) {
-		data.append(field.name, field.value);
-	});
-	data.append('userfile', file);
-
-	xhr.send(data);
-}
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index b5ac93204..a851eb203 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -1,7 +1,7 @@
 <div class="{{if $tiles}}section-content-wrapper{{else}}section-content-wrapper-np{{/if}}">
 	{{if $tiles}}
 	<table id="cloud-index">
-		<tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+		<tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
 	</table>
 	<div class="row row-cols-2 row-cols-md-4">
 		{{if $parentpath}}
@@ -136,7 +136,7 @@
 			</td>
 		</tr>
 		{{/if}}
-		<tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+		<tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
 		{{foreach $entries as $item}}
 		<tr id="cloud-index-{{$item.attach_id}}" class="cloud-index{{if $item.collection}} attach-drop{{/if}}"{{if $item.collection}} data-folder="{{$item.resource}}"{{/if}} data-id="{{$item.attach_id}}" draggable="true">
 			<td>
diff --git a/view/tpl/photos_upload.tpl b/view/tpl/photos_upload.tpl
index 95cf4e295..72f6c4611 100644
--- a/view/tpl/photos_upload.tpl
+++ b/view/tpl/photos_upload.tpl
@@ -55,7 +55,7 @@
 		</form>
 	</div>
 	<table id="upload-index">
-		<tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
+		<tr id="new-upload-progress-bar-0"></tr> {{* this is needed to append the upload files in the right order *}}
 	</table>
 	{{$aclselect}}
 	<div id="photos-upload-end" class="clear"></div>