aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAndrew Manning <tamanning@zoho.com>2016-07-24 17:33:34 -0400
committerAndrew Manning <tamanning@zoho.com>2016-07-24 17:33:34 -0400
commit1b1170bcf6a0275ff3afa8c92cffb8da2f9f0686 (patch)
tree0e68d182dca72b2f3dc6d90d453bef7e15d2bbd9
parenteb03877aa480c6b0ca4eb6f54131fb2880d62ab0 (diff)
downloadvolse-hubzilla-1b1170bcf6a0275ff3afa8c92cffb8da2f9f0686.tar.gz
volse-hubzilla-1b1170bcf6a0275ff3afa8c92cffb8da2f9f0686.tar.bz2
volse-hubzilla-1b1170bcf6a0275ff3afa8c92cffb8da2f9f0686.zip
Drag and drop one image file at a time into the post editor will upload it.
-rw-r--r--view/css/conversation.css9
-rwxr-xr-xview/tpl/jot-header.tpl82
2 files changed, 90 insertions, 1 deletions
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 68aa8bfbe..87965b2b8 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -40,6 +40,15 @@
resize: vertical;
}
+#profile-jot-text.hover {
+ color: #f00;
+ background-color: #43488A;
+ opacity: 0.5;
+ border-color: #f00;
+ border-style: solid;
+ box-shadow: inset 0 3px 4px #888;
+}
+
.jot-attachment {
border: 0px;
padding: 10px;
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 9953875ef..904b333d6 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -164,6 +164,12 @@ function enableOnUser(){
});
} catch(e) {
}
+
+
+ // call initialization file
+ if (window.File && window.FileList && window.FileReader) {
+ DragDropUploadInit();
+ }
});
function deleteCheckedItems() {
@@ -446,7 +452,81 @@ function enableOnUser(){
},
'json');
};
-
+
+ //
+ // initialize
+ function DragDropUploadInit() {
+
+ var filedrag = $("#profile-jot-text");
+
+ // is XHR2 available?
+ var xhr = new XMLHttpRequest();
+ if (xhr.upload) {
+
+ // 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" : "");
+ }
+
+ // file selection
+ function DragDropUploadFileSelectHandler(e) {
+
+ // cancel event and hover styling
+ DragDropUploadFileHover(e);
+
+ // fetch FileList object
+ var files = e.target.files || e.originalEvent.dataTransfer.files;
+ // process all File objects
+ for (var i = 0, f; f = files[i]; i++) {
+ 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) {
+ $('#profile-rotator').spin('tiny');
+ });
+ 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) {
+ addeditortext(xhr.responseText);
+ $('#jot-media').val($('#jot-media').val() + xhr.responseText);
+ $('#profile-rotator').spin(false);
+ window.fileUploadsCompleted = window.filesToUpload = 0;
+ }
+ });
+ // POST to the wall_upload endpoint
+ xhr.open('post', '{{$baseurl}}/wall_upload/{{$nickname}}', true);
+
+ var data = new FormData();
+ data.append('userfile', file);
+ xhr.send(data);
+ }
+
</script>
<script>