diff --git a/Zotlabs/Storage/Browser.php b/Zotlabs/Storage/Browser.php index 0d1d4e791..93c55bd4c 100644 --- a/Zotlabs/Storage/Browser.php +++ b/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. * 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); - // cancel event and hover styling - DragDropUploadFileHover(e); + // fetch FileList object + var files = e.target.files || e.originalEvent.dataTransfer.files; - // 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); - } + $('.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( + "" + "" + f.name + + "" + f.type + + "" + formatSizeUnits(f.size) + + "" + ); +} + +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; + 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 xhr = new XMLHttpRequest(); - var data = new FormData(document.getElementById("ajax-upload-files")); - data.append('file[]', file); - xhr.send(data); + 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}}
{{if $quota.warning}}{{$quota.warning}} {{/if}}{{$quota.desc}}
{{/if}}
-
-

{{$dragdroptext}}
-
-
-
- - + +
-
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 @@ -
+