aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl
diff options
context:
space:
mode:
authorAndrew Manning <tamanning@zoho.com>2016-07-24 07:41:53 -0400
committerAndrew Manning <tamanning@zoho.com>2016-07-24 07:41:53 -0400
commit6998bb1f23b63c3439f34d9b3f53c42a6922a58e (patch)
tree33b706f658837ef080d6ec5b94accc451d262b5f /view/tpl
parent3a60bef2b6cd8288c6be50915687ef7c0df89878 (diff)
downloadvolse-hubzilla-6998bb1f23b63c3439f34d9b3f53c42a6922a58e.tar.gz
volse-hubzilla-6998bb1f23b63c3439f34d9b3f53c42a6922a58e.tar.bz2
volse-hubzilla-6998bb1f23b63c3439f34d9b3f53c42a6922a58e.zip
Multiple file upload by drag and drop with progress indicators and auto page reload
Diffstat (limited to 'view/tpl')
-rw-r--r--view/tpl/cloud_actionspanel.tpl213
1 files changed, 20 insertions, 193 deletions
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 @@
<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>
- </form>
- <div class="clear"></div>
- -->
- <form id="ajax-upload-files" action="" method="POST" enctype="multipart/form-data">
- <input type="hidden" name="sabreAction" value="put">
-
- <fieldset>
-
- <input type="hidden" name="sabreAction" value="put">
- <div>
- <label for="fileselect">Files to upload:</label>
-<!-- <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />-->
-<!-- <input type="file" id="fileselect" name="fileselect[]" />-->
- <div id="filedrag">or drop files here</div>
- </div>
-
- <div id="submitbutton">
- <button type="submit">Upload Files</button>
- </div>
-
- </fieldset>
- <div id="file-upload-list"></div>
-
- <div id="profile-rotator-wrapper">
- <div id="profile-rotator"></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>
- </form>
+ <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>
-
-<style>
-
- #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;
- }
-
-</style>
-
-<script>
-$(document).ready(function() {
-//
-// try {
-// var file_uploader = new window.AjaxUpload('submitbutton',
-// { action: 'cloud',
-// name: 'userfile',
-// title: 'Upload',
-// onSubmit: function(file,ext) { $('#profile-rotator').spin('tiny'); },
-// onComplete: function(file,response) {
-// $("#file-upload-list").append("Upload complete!");
-// $('#profile-rotator').spin(false);
-// }
-// });
-// } catch(e) {
-// }
- // call initialization file
- if (window.File && window.FileList && window.FileReader) {
- DragDropUploadInit();
- }
-});
-
-//
-// initialize
-function DragDropUploadInit() {
-
- var fileselect = $("#fileselect"),
- filedrag = $("#filedrag"),
- submitbutton = $("#submitbutton");
-
- // file select
- fileselect.on("change", FileSelectHandler);
-
- // is XHR2 available?
- var xhr = new XMLHttpRequest();
- if (xhr.upload) {
-
- // file drop
- filedrag.on("dragover", FileDragHover);
- filedrag.on("dragleave", FileDragHover);
- filedrag.on("drop", FileSelectHandler);
- filedrag.show();
-
- // remove submit button
- submitbutton.hide();
- }
-
-
-}
-
-// file drag hover
-function FileDragHover(e) {
- e.stopPropagation();
- e.preventDefault();
- e.target.className = (e.type == "dragover" ? "hover" : "");
-}
-
-// file selection
-function FileSelectHandler(e) {
-
- // cancel event and hover styling
- FileDragHover(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>File information: <strong>" + f.name +
- "</strong> type: <strong>" + f.type +
- "</strong> size: <strong>" + f.size +
- "</strong> bytes</p>"
- );
- DragDropUploadFile(f);
- }
-
-}
-
-// upload files
-function DragDropUploadFile(file) {
-
- // Serialize the data in the form
- //var serializedData = $('#ajax-upload-files').serialize();
-//
-// $.ajax({
-// type: "POST",
-// url: '',
-// data: serializedData,
-// success: function(result){
-// //window.console.log(result);
-// return false;
-// }
-// });
-//
-
- var xhr = new XMLHttpRequest();
- xhr.withCredentials = true;
- (xhr.upload || xhr).addEventListener('progress', function(e) {
- var done = e.position || e.loaded
- var total = e.totalSize || e.total;
- console.log('xhr progress: ' + Math.round(done/total*100) + '%');
- });
- xhr.addEventListener('load', function(e) {
- //console.log('xhr upload complete', e, this.responseText);
- console.log('xhr upload complete', e);
- });
- xhr.open('post', 'cloud', true);
-
- var data = new FormData(document.getElementById("ajax-upload-files"));
- data.append('file', file);
- xhr.send(data);
-//
-// var xhr = new XMLHttpRequest();
-// if (xhr.upload) {
-// // start upload
-// window.console.log("Uploading...");
-// xhr.open("POST", $("#ajax-upload-files").action, true);
-// xhr.setRequestHeader("X_FILENAME", file.name);
-// xhr.send(file);
-//
-// }
-
-}
-
-
-</script> \ No newline at end of file