From f808f1601b548ee4830f7a16b479eadce3b66094 Mon Sep 17 00:00:00 2001 From: Mario Vavti Date: Wed, 27 Jul 2016 16:49:55 +0200 Subject: 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 560af7a5b8e30001ea6bf9a6d2ea36e94ae904d0 since it did not work so well with the new cloud upload mechanism --- view/css/mod_cloud.css | 4 + view/js/mod_cloud.js | 184 +++++++++++++++++++++++--------------- view/theme/redbasic/css/style.css | 21 ----- view/tpl/cloud_actionspanel.tpl | 10 +-- view/tpl/cloud_directory.tpl | 2 +- 5 files changed, 121 insertions(+), 100 deletions(-) (limited to 'view') 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); + + // fetch FileList object + var files = e.target.files || e.originalEvent.dataTransfer.files; - // 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); - } + $('.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) { - - 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); +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); + + 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 @@ -
+
-- cgit v1.2.3