Merge pull request #458 from anaqreon/dragdropupload

Drag-and-drop file upload for cloud files

5 files changed, 147 insertions, 21 deletions

diff --git a/Zotlabs/Storage/Browser.php b/Zotlabs/Storage/Browser.php
index 713d75108..e719530b5 100644
--- a/Zotlabs/Storage/Browser.php
+++ b/Zotlabs/Storage/Browser.php
@@ -306,7 +306,8 @@ class Browser extends DAV\Browser\Plugin {
 				'$folder_submit' => t('Create'),
 				'$upload_header' => t('Upload file'),
 				'$upload_submit' => t('Upload'),
-				'$quota' => $quota
+				'$quota' => $quota,
+				'$dragdroptext' => t('Drop files here to immediately upload')
 			));
 	}
 
diff --git a/vendor/sabre/dav/lib/DAV/Browser/Plugin.php b/vendor/sabre/dav/lib/DAV/Browser/Plugin.php
index 49359a045..4959193ea 100644
--- a/vendor/sabre/dav/lib/DAV/Browser/Plugin.php
+++ b/vendor/sabre/dav/lib/DAV/Browser/Plugin.php
@@ -163,7 +163,7 @@ class Plugin extends DAV\ServerPlugin {
      * @return bool
      */
     function httpPOST(RequestInterface $request, ResponseInterface $response) {
-
+			
         $contentType = $request->getHeader('Content-Type');
         list($contentType) = explode(';', $contentType);
         if ($contentType !== 'application/x-www-form-urlencoded' &&
@@ -179,7 +179,7 @@ class Plugin extends DAV\ServerPlugin {
 
         if ($this->server->emit('onBrowserPostAction', [$uri, $postVars['sabreAction'], $postVars])) {
 
-            switch ($postVars['sabreAction']) {
+					switch ($postVars['sabreAction']) {
 
                 case 'mkcol' :
                     if (isset($postVars['name']) && trim($postVars['name'])) {
@@ -221,7 +221,7 @@ class Plugin extends DAV\ServerPlugin {
 
                     if ($_FILES) $file = current($_FILES);
                     else break;
-
+										
                     list(, $newName) = URLUtil::splitPath(trim($file['name']));
                     if (isset($postVars['name']) && trim($postVars['name']))
                         $newName = trim($postVars['name']);
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
new file mode 100644
index 000000000..71e916446
--- /dev/null
+++ b/view/js/mod_cloud.js
@@ -0,0 +1,98 @@
+/**
+ * JavaScript for mod/cloud
+ */
+
+$(document).ready(function () {
+  // call initialization file
+  if (window.File && window.FileList && window.FileReader) {
+    DragDropUploadInit();
+  }
+});
+
+//
+// initialize
+function DragDropUploadInit() {
+
+  var fileselect = $("#fileselect"),
+          filedrag = $("#filedrag");
+
+  // file select
+  fileselect.on("change", DragDropUploadFileSelectHandler);
+
+  // is XHR2 available?
+  var xhr = new XMLHttpRequest();
+  if (xhr.upload) {
+
+    // 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" : "");
+}
+
+// file selection
+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();
+  // 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);
+  }
+
+}
+
+// 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);
+}
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 6cc3e2f10..6fde5e39e 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -2040,4 +2040,25 @@ dl.bb-dl > dd > li {
 
 #wiki-preview img {
     max-width: 100%;
-}
\ No newline at end of file
+}
+
+#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 81a586e75..fba457fdc 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -1,20 +1,26 @@
 <div id="files-mkdir-tools" class="section-content-tools-wrapper">
-	<label for="files-mkdir">{{$folder_header}}</label>
-	<form method="post" action="">
-		<input type="hidden" name="sabreAction" value="mkcol">
-		<input id="files-mkdir" type="text" name="name" class="form-control form-group">
-		<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
-	</form>
-	<div class="clear"></div>
+  <label for="files-mkdir">{{$folder_header}}</label>
+  <form method="post" action="">
+    <input type="hidden" name="sabreAction" value="mkcol">
+    <input id="files-mkdir" type="text" name="name" class="form-control form-group">
+    <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
+  </form>
+  <div class="clear"></div>
 </div>
 <div id="files-upload-tools" class="section-content-tools-wrapper">
-	{{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}}
-	<label for="files-upload">{{$upload_header}}</label>
-	<form method="post" action="" enctype="multipart/form-data">
-		<input type="hidden" name="sabreAction" value="put">
-		<input class="form-group" id="files-upload" type="file" name="file">
-		<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
-		<!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form-->
-	</form>
-	<div class="clear"></div>
+  {{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" style="width: 70%;">
+    <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
+  </form>
+  <div class="clear"></div>
+  <hr/>
 </div>