From 3c5598407eb327c056d803b3afc4364fd6e107ab Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Fri, 22 Jul 2016 21:27:32 -0400 Subject: Drag and drop file information display in cloud files upload form. No actual upload implemented yet. --- view/tpl/cloud_actionspanel.tpl | 112 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index 81a586e75..d4e187619 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -17,4 +17,116 @@
+ +
+ +
+ + + +
+ + +
or drop files here
+
+ +
+ +
+ +
+
+ +
+
+ + + + \ No newline at end of file -- cgit v1.2.3 From eb1eb38c0174b542e388b32039589c0030ebd073 Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sat, 23 Jul 2016 07:59:28 -0400 Subject: AJAX single upload might be working, but permissions problems seem to cause failure. --- vendor/sabre/dav/lib/DAV/Browser/Plugin.php | 7 ++- view/tpl/cloud_actionspanel.tpl | 88 +++++++++++++++++++++++++---- 2 files changed, 81 insertions(+), 14 deletions(-) diff --git a/vendor/sabre/dav/lib/DAV/Browser/Plugin.php b/vendor/sabre/dav/lib/DAV/Browser/Plugin.php index 49359a045..72b04065a 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,8 @@ class Plugin extends DAV\ServerPlugin { if ($_FILES) $file = current($_FILES); else break; - + logger('$_FILES: ' . json_encode($_FILES)); + logger('$file: ' . json_encode($file)); list(, $newName) = URLUtil::splitPath(trim($file['name'])); if (isset($postVars['name']) && trim($postVars['name'])) $newName = trim($postVars['name']); diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index d4e187619..688b8f33d 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -9,24 +9,25 @@
{{if $quota.limit || $quota.used}}
{{if $quota.warning}}{{$quota.warning}} {{/if}}{{$quota.desc}}
{{/if}} - +
- -
+ --> + +
-
- + +
or drop files here
@@ -36,7 +37,10 @@
- + +
+
+
@@ -68,10 +72,24 @@ \ No newline at end of file -- cgit v1.2.3 From 3a60bef2b6cd8288c6be50915687ef7c0df89878 Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sat, 23 Jul 2016 08:39:23 -0400 Subject: Include credentials for session cookie in xhr --- view/tpl/cloud_actionspanel.tpl | 1 + 1 file changed, 1 insertion(+) diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index 688b8f33d..86fda883c 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -167,6 +167,7 @@ function DragDropUploadFile(file) { // var xhr = new XMLHttpRequest(); + xhr.withCredentials = true; (xhr.upload || xhr).addEventListener('progress', function(e) { var done = e.position || e.loaded var total = e.totalSize || e.total; -- cgit v1.2.3 From 6998bb1f23b63c3439f34d9b3f53c42a6922a58e Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sun, 24 Jul 2016 07:41:53 -0400 Subject: Multiple file upload by drag and drop with progress indicators and auto page reload --- Zotlabs/Storage/Browser.php | 3 +- view/js/mod_cloud.js | 98 ++++++++++++++++++ view/theme/redbasic/css/style.css | 23 +++- view/tpl/cloud_actionspanel.tpl | 213 ++++---------------------------------- 4 files changed, 142 insertions(+), 195 deletions(-) create mode 100644 view/js/mod_cloud.js 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/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( + "

" + " -> File: " + f.name + + " type: " + f.type + + " size: " + f.size + + " bytes

" + ); + 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 86fda883c..fba457fdc 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -1,199 +1,26 @@
- -
- - - -
-
+ +
+ + + +
+
- {{if $quota.limit || $quota.used}}
{{if $quota.warning}}{{$quota.warning}} {{/if}}{{$quota.desc}}
{{/if}} - -
- - -
- - -
- - - -
or drop files here
-
- -
- -
- -
-
- -
-
+ {{if $quota.limit || $quota.used}}
{{if $quota.warning}}{{$quota.warning}} {{/if}}{{$quota.desc}}
{{/if}} + + +
+

{{$dragdroptext}}
- +
+
+
+ + + +
+
- - - - \ No newline at end of file -- cgit v1.2.3 From 4c4d185937687a2a806a8d2b144eaf2dff17acb5 Mon Sep 17 00:00:00 2001 From: Andrew Manning Date: Sun, 24 Jul 2016 08:35:21 -0400 Subject: Remove logger calls --- vendor/sabre/dav/lib/DAV/Browser/Plugin.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/vendor/sabre/dav/lib/DAV/Browser/Plugin.php b/vendor/sabre/dav/lib/DAV/Browser/Plugin.php index 72b04065a..4959193ea 100644 --- a/vendor/sabre/dav/lib/DAV/Browser/Plugin.php +++ b/vendor/sabre/dav/lib/DAV/Browser/Plugin.php @@ -221,8 +221,7 @@ class Plugin extends DAV\ServerPlugin { if ($_FILES) $file = current($_FILES); else break; - logger('$_FILES: ' . json_encode($_FILES)); - logger('$file: ' . json_encode($file)); + list(, $newName) = URLUtil::splitPath(trim($file['name'])); if (isset($postVars['name']) && trim($postVars['name'])) $newName = trim($postVars['name']); -- cgit v1.2.3