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 560af7a5b8 since it did not work so well with the new cloud upload mechanism

Zotlabs/Storage/Browser.php

@@ -69,81 +69,6 @@ class Browser extends DAV\Browser\Plugin {
 		}
 	}
 
-	/**
-	 * Extend from parent to add our own listeners
-	 */
-	function initialize(DAV\Server $server) {
-		parent::initialize($server);
-		if ($this->enablePost) {
-			$this->server->on('onBrowserPostAction', [$this, 'cloudPostAction']);
-		}
-	}
-
-	/**
-	 * Handles POST requests for tree operations.
-	 *
-	 * @param string $uri
-	 * @param string $action
-	 * @param array $postVars
-	 * @return boolean false will stop other events in the beforeMethod chain to execute
-	 */
-	function cloudPostAction($uri, $action, $postVars) {
-		switch ($postVars['sabreAction']) {
-			case 'mkcol' :
-				if (isset($postVars['name']) && trim($postVars['name'])) {
-					// Using basename() because we won't allow slashes
-					list(, $folderName) = \Sabre\HTTP\URLUtil::splitPath(trim($postVars['name']));
-
-					if (isset($postVars['resourceType'])) {
-						$resourceType = explode(',', $postVars['resourceType']);
-					} else {
-						$resourceType = ['{DAV:}collection'];
-					}
-
-					$properties = [];
-					foreach ($postVars as $varName => $varValue) {
-						// Any _POST variable in clark notation is treated
-						// like a property.
-						if ($varName[0] === '{') {
-							// PHP will convert any dots to underscores.
-							// This leaves us with no way to differentiate
-							// the two.
-							// Therefore we replace the string *DOT* with a
-							// real dot. * is not allowed in uris so we
-							// should be good.
-							$varName = str_replace('*DOT*', '.', $varName);
-							$properties[$varName] = $varValue;
-						}
-					}
-
-					$mkCol = new DAV\MkCol(
-						$resourceType,
-						$properties
-					);
-					$this->server->createCollection($uri . '/' . $folderName, $mkCol);
-				}
-				break;
-
-			case 'put' :
-
-				if ($_FILES)
-					$file = current($_FILES);
-				else
-					break;
-
-				for ($i = 0; $i < count($file['name']); $i++) {
-					list(, $newName) = \Sabre\HTTP\URLUtil::splitPath(trim($file['name'][$i]));
-
-					if (is_uploaded_file($file['tmp_name'][$i])) {
-						$this->server->createFile($uri . '/' . $newName, fopen($file['tmp_name'][$i], 'r'));
-					}
-				}
-				break;
-
-		}
-		return false;
-	}
-
 	/**
 	 * @brief Creates the directory listing for the given path.
 	 *

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

view/js/mod_cloud.js

@@ -5,94 +5,138 @@
 $(document).ready(function () {
 	// call initialization file
 	if (window.File && window.FileList && window.FileReader) {
-    DragDropUploadInit();
+		UploadInit();
 	}
 });
 
 //
 // initialize
-function DragDropUploadInit() {
+function UploadInit() {
 
-  var fileselect = $("#fileselect"),
+	var fileselect = $("#files-upload");
-          filedrag = $("#filedrag");
+	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) {
 
+		// file select
+		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);
-    filedrag.show();
-
 	}
 
 	window.filesToUpload = 0;
 	window.fileUploadsCompleted = 0;
-
-
 }
 
 // file drag hover
 function DragDropUploadFileHover(e) {
 	e.stopPropagation();
 	e.preventDefault();
-  e.target.className = (e.type == "dragover" ? "hover" : "");
+	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;
-  $("#file-upload-list").empty();
+
+	$('.new-upload').remove();
+
 	// process all File objects
 	for (var i = 0, f; f = files[i]; i++) {
-    $("#file-upload-list").append(
+		prepareHtml(f, i);
-            "<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name +
+		UploadFile(f, i);
-            "</strong> type: <strong>" + f.type +
+	}
-            "</strong> size: <strong>" + f.size +
+}
-            "</strong> bytes</p>"
+
-            );
+// file selection via input
-    DragDropUploadFile(f, i);
+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) {
+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);
+
+	data.append('file', file);
+
 	xhr.send(data);
 }

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

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>
+    <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>
+    <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>

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>