rework drag and drop to drag directly into files area, implement the default upload button to work with the same mechanism as drag and drop, revert 560af7a5b8e30001ea6bf9a6d2ea36e94ae904d0 since it did not work so well with the new cloud upload mechanism

1 files changed, 114 insertions, 70 deletions

diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 0584cec53..4ef87ec4b 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -3,96 +3,140 @@
  */
 
 $(document).ready(function () {
-  // call initialization file
-  if (window.File && window.FileList && window.FileReader) {
-    DragDropUploadInit();
-  }
+	// call initialization file
+	if (window.File && window.FileList && window.FileReader) {
+		UploadInit();
+	}
 });
 
 //
 // initialize
-function DragDropUploadInit() {
+function UploadInit() {
 
-  var fileselect = $("#fileselect"),
-          filedrag = $("#filedrag");
+	var fileselect = $("#files-upload");
+	var filedrag = $("#cloud-drag-area");
+	var submit = $("#upload-submit");
 
-  // file select
-  fileselect.on("change", DragDropUploadFileSelectHandler);
+	// is XHR2 available?
+	var xhr = new XMLHttpRequest();
+	if (xhr.upload) {
 
-  // is XHR2 available?
-  var xhr = new XMLHttpRequest();
-  if (xhr.upload) {
+		// file select
+		fileselect.on("change", UploadFileSelectHandler);
 
-    // file drop
-    filedrag.on("dragover", DragDropUploadFileHover);
-    filedrag.on("dragleave", DragDropUploadFileHover);
-    filedrag.on("drop", DragDropUploadFileSelectHandler);
-    filedrag.show();
-
-  }
-
-  window.filesToUpload = 0;
-  window.fileUploadsCompleted = 0;
+		// 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.target.className = (e.type == "dragover" ? "hover" : "");
+	e.stopPropagation();
+	e.preventDefault();
+	e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
 }
 
-// file selection
+// 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;
 
-  // cancel event and hover styling
-  DragDropUploadFileHover(e);
-
-  // fetch FileList object
-  var files = e.target.files || e.originalEvent.dataTransfer.files;
-  $("#file-upload-list").empty();
-  // process all File objects
-  for (var i = 0, f; f = files[i]; i++) {
-    $("#file-upload-list").append(
-            "<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name +
-            "</strong> type: <strong>" + f.type +
-            "</strong> size: <strong>" + f.size +
-            "</strong> bytes</p>"
-            );
-    DragDropUploadFile(f, i);
-  }
+	$('.new-upload').remove();
 
+	// process all File objects
+	for (var i = 0, f; f = files[i]; i++) {
+		prepareHtml(f, i);
+		UploadFile(f, i);
+	}
+}
+
+// file selection via input
+function UploadFileSelectHandler(e) {
+	// fetch FileList object
+	if(e.type === 'click') {
+		e.preventDefault();
+		var files = e.data[0].files;
+	}
+	else {
+		var files = e.target.files;
+	}
+
+	$('.new-upload').remove();
+
+	// process all File objects
+	for (var i = 0, f; f = files[i]; i++) {
+		prepareHtml(f, i);
+		if(e.type === 'click')
+			UploadFile(f, i);
+	}
+}
+
+function prepareHtml(f, i) {
+	$("#cloud-index").prepend(
+		"<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
+		"</td><td>" + f.type +
+		"</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
+		"</td><td></td></tr>"
+	);
+}
+
+function formatSizeUnits(bytes){
+        if      (bytes>=1000000000) {bytes=(bytes/1000000000).toFixed(2)+' GB';}
+        else if (bytes>=1000000)    {bytes=(bytes/1000000).toFixed(2)+' MB';}
+        else if (bytes>=1000)       {bytes=(bytes/1000).toFixed(2)+' KB';}
+        else if (bytes>1)           {bytes=bytes+' bytes';}
+        else if (bytes==1)          {bytes=bytes+' byte';}
+        else                        {bytes='0 byte';}
+        return bytes;
 }
 
 // upload  files
-function DragDropUploadFile(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) + '%');
-  });
-  xhr.addEventListener('load', function (e) {
-    //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;
-    }
-  });
-  // POST to the entire cloud path 
-  xhr.open('post', window.location.pathname, true);
-
-  var data = new FormData(document.getElementById("ajax-upload-files"));
-  data.append('file[]', file);
-  xhr.send(data);
+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) + '%');
+	});
+
+	xhr.addEventListener('load', function (e) {
+
+		//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;
+		}
+	});
+
+	// POST to the entire cloud path 
+	xhr.open('post', window.location.pathname, true);
+
+	var data = new FormData(document.getElementById("ajax-upload-files"));
+
+	data.append('file', file);
+
+	xhr.send(data);
 }