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