diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/js/mod_cloud.js | 98 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 23 | ||||
| -rw-r--r-- | view/tpl/cloud_actionspanel.tpl | 38 |
3 files changed, 142 insertions, 17 deletions
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( + "<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); + } + +} + +// 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 81a586e75..fba457fdc 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -1,20 +1,26 @@ <div id="files-mkdir-tools" class="section-content-tools-wrapper"> - <label for="files-mkdir">{{$folder_header}}</label> - <form method="post" action=""> - <input type="hidden" name="sabreAction" value="mkcol"> - <input id="files-mkdir" type="text" name="name" class="form-control form-group"> - <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button> - </form> - <div class="clear"></div> + <label for="files-mkdir">{{$folder_header}}</label> + <form method="post" action=""> + <input type="hidden" name="sabreAction" value="mkcol"> + <input id="files-mkdir" type="text" name="name" class="form-control form-group"> + <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button> + </form> + <div class="clear"></div> </div> <div id="files-upload-tools" class="section-content-tools-wrapper"> - {{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}} - <label for="files-upload">{{$upload_header}}</label> - <form method="post" action="" enctype="multipart/form-data"> - <input type="hidden" name="sabreAction" value="put"> - <input class="form-group" id="files-upload" type="file" name="file"> - <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> - <!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form--> - </form> - <div class="clear"></div> + {{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" style="width: 70%;"> + <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> + </form> + <div class="clear"></div> + <hr/> </div> |