aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
Diffstat (limited to 'view')
-rw-r--r--view/css/mod_cloud.css4
-rw-r--r--view/js/mod_cloud.js184
-rw-r--r--view/theme/redbasic/css/style.css21
-rw-r--r--view/tpl/cloud_actionspanel.tpl10
-rw-r--r--view/tpl/cloud_directory.tpl2
5 files changed, 121 insertions, 100 deletions
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(
- "<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);
- }
+ $('.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(
+ "<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
+ "</td><td>" + f.type +
+ "</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
+ "</td><td></td></tr>"
+ );
+}
+
+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}}<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[]" multiple>
- <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
+ <input class="form-group pull-left" id="files-upload" type="file" name="file" multiple>
+ <button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
</form>
<div class="clear"></div>
- <hr/>
</div>
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 @@
-<div class="section-content-wrapper-np">
+<div id="cloud-drag-area" class="section-content-wrapper-np">
<table id="cloud-index">
<tr>
<th width="1%"></th>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-01 05:17:42 +0000