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);
 }