aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl
diff options
context:
space:
mode:
authorAndrew Manning <tamanning@zoho.com>2016-07-22 21:27:32 -0400
committerAndrew Manning <tamanning@zoho.com>2016-07-22 21:27:32 -0400
commit3c5598407eb327c056d803b3afc4364fd6e107ab (patch)
treed43443844e65ace21c4fbd0e1dc3b530ab8193b5 /view/tpl
parent4ffc4ee70aa38c24cee2a7ae0b35c9203515acef (diff)
downloadvolse-hubzilla-3c5598407eb327c056d803b3afc4364fd6e107ab.tar.gz
volse-hubzilla-3c5598407eb327c056d803b3afc4364fd6e107ab.tar.bz2
volse-hubzilla-3c5598407eb327c056d803b3afc4364fd6e107ab.zip
Drag and drop file information display in cloud files upload form. No actual upload implemented yet.
Diffstat (limited to 'view/tpl')
-rw-r--r--view/tpl/cloud_actionspanel.tpl112
1 files changed, 112 insertions, 0 deletions
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl
index 81a586e75..d4e187619 100644
--- a/view/tpl/cloud_actionspanel.tpl
+++ b/view/tpl/cloud_actionspanel.tpl
@@ -17,4 +17,116 @@
<!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form-->
</form>
<div class="clear"></div>
+
+ <form id="upload" action="" method="POST" enctype="multipart/form-data">
+
+ <fieldset>
+
+ <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
+ <input type="hidden" name="sabreAction" value="put">
+ <div>
+ <label for="fileselect">Files to upload:</label>
+ <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
+ <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>
+
+ </form>
+ <div class="clear"></div>
</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() {
+// 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>"
+ );
+ }
+
+}
+
+</script> \ No newline at end of file