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

5 files changed, 121 insertions, 100 deletions

diff --git a/view/css/mod_cloud.css b/view/css/mod_cloud.css
index ed07ceb6f..85b6e4aff 100644
--- a/view/css/mod_cloud.css
+++ b/view/css/mod_cloud.css
@@ -41,3 +41,7 @@
 	padding: 7px 10px;
 	width: 100%;
 }
+
+#cloud-drag-area.hover {
+   box-shadow: inset 0 0px 7px #5cb85c;
+}
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);
 }
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index ce69b6cff..2b0f3b853 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -2042,24 +2042,3 @@ dl.bb-dl > dd > li {
 #wiki-preview img {
     max-width: 100%;
 }
-
-#filedrag
-{
-    display: none;
-    font-weight: bold;
-    text-align: center;
-    padding: 1em 0;
-    margin: 1em 0;
-    color: #555;
-    border: 2px dashed #555;
-    border-radius: 7px;
-    cursor: default;
-}
-
-#filedrag.hover
-{
-    color: #f00;
-    border-color: #f00;
-    border-style: solid;
-    box-shadow: inset 0 3px 4px #888;
-}
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 9cdd73b31..8976b3007 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -11,16 +11,10 @@
   {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
   <form id="ajax-upload-files" method="post" action="" enctype="multipart/form-data">
     <input type="hidden" name="sabreAction" value="put">
-    <div>
-      <div id="filedrag" style="height: 7em;"><br>{{$dragdroptext}}</div>
-    </div>
-    <div id="file-upload-list"></div>
-    <div class="clear"></div>
     <label for="files-upload">{{$upload_header}}</label>
     <div class="clear"></div>
-    <input class="form-group pull-left" id="files-upload" type="file" name="file[]" multiple>
-    <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
+    <input class="form-group pull-left" id="files-upload" type="file" name="file" multiple>
+    <button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
   </form>
   <div class="clear"></div>
-  <hr/>
 </div>
diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl
index 870f7e9e1..06176fdb8 100644
--- a/view/tpl/cloud_directory.tpl
+++ b/view/tpl/cloud_directory.tpl
@@ -1,4 +1,4 @@
-<div class="section-content-wrapper-np">
+<div id="cloud-drag-area" class="section-content-wrapper-np">
 	<table id="cloud-index">
 		<tr>
 			<th width="1%"></th>