diff options
| author | B Stack <bgstack15@gmail.com> | 2020-12-18 19:11:38 -0500 |
|---|---|---|
| committer | B Stack <bgstack15@gmail.com> | 2020-12-18 19:25:23 -0500 |
| commit | 52ac4782f7acf7994d9d9e4136fc05099d252f59 (patch) | |
| tree | b682e3f2c32f731ce34bcc4eddae9780781a99e5 /static | |
| parent | improve instructions for installing short_url (diff) | |
| download | hex-zero-52ac4782f7acf7994d9d9e4136fc05099d252f59.tar.gz hex-zero-52ac4782f7acf7994d9d9e4136fc05099d252f59.tar.bz2 hex-zero-52ac4782f7acf7994d9d9e4136fc05099d252f59.zip | |
add drag-and-drop /upload/ route
Diffstat (limited to 'static')
| -rw-r--r-- | static/dd-upload.css | 17 | ||||
| -rw-r--r-- | static/dd-upload.js | 103 | ||||
| -rw-r--r-- | static/styles.css | 2 |
3 files changed, 122 insertions, 0 deletions
diff --git a/static/dd-upload.css b/static/dd-upload.css new file mode 100644 index 0000000..39586eb --- /dev/null +++ b/static/dd-upload.css @@ -0,0 +1,17 @@ +/* (A) UPLOAD ZONE */
+/* Author: W.S. Toh */
+/* SPDX-License-Identifier: MIT */
+#upzone {
+ width: 300px;
+ height: 200px;
+ background: #cfd5ff;
+ padding: 10px;
+}
+#upzone.highlight {
+ background: #ff0;
+}
+
+/* (B) UPLOAD FORM */
+#upform {
+ display: none;
+}
diff --git a/static/dd-upload.js b/static/dd-upload.js new file mode 100644 index 0000000..51df214 --- /dev/null +++ b/static/dd-upload.js @@ -0,0 +1,103 @@ +/* Author: W.S. Toh */
+/* SPDX-License-Identifier: MIT */
+var ddup = {
+ // (A) ON PAGE LOAD
+ hzone: null, // HTML upload zone
+ hstat: null, // HTML upload status
+ hform: null, // HTML upload form
+ init : function () {
+ // (A1) GET HTML ELEMENTS
+ ddup.hzone = document.getElementById("upzone");
+ ddup.hstat = document.getElementById("upstat");
+ ddup.hform = document.getElementById("upform");
+
+ // (A2) DRAG-DROP SUPPORTED
+ if (window.File && window.FileReader && window.FileList && window.Blob) {
+ // HIGHLIGHT DROPZONE ON FILE HOVER
+ ddup.hzone.addEventListener("dragenter", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ ddup.hzone.classList.add('highlight');
+ });
+ ddup.hzone.addEventListener("dragleave", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ ddup.hzone.classList.remove('highlight');
+ });
+
+ // DROP TO UPLOAD FILE
+ ddup.hzone.addEventListener("dragover", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ });
+ ddup.hzone.addEventListener("drop", function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ ddup.hzone.classList.remove('highlight');
+ ddup.queue(e.dataTransfer.files);
+ });
+ }
+
+ // (A3) DRAG-DROP UPLOAD NOT SUPPORTED
+ else {
+ ddup.hzone.style.display = "none";
+ ddup.hform.style.display = "block";
+ }
+ },
+
+ // (B) UPLOAD QUEUE + HANDLER
+ // NOTE: AJAX IS ASYNCHRONOUS
+ // A QUEUE IS REQUIRED TO STOP SERVER FLOOD
+ upqueue : [], // upload queue
+ uplock : false, // currently uploading a file
+ queue : function (files) {
+ // FILE LIST INTO QUEUE
+ for (let f of files) {
+ // OPTIONAL - SHOW UPLOAD STATUS
+ ddup.hstat.innerHTML += `<div>${f.name} - Added to queue</div>`;
+ // ADD TO QUEUE
+ ddup.upqueue.push(f);
+ }
+ // GO!
+ ddup.go();
+ },
+
+ // (C) AJAX UPLOAD
+ go : function () { if (!ddup.uplock && ddup.upqueue.length!=0) {
+ // (C1) QUEUE STATUS UPDATE
+ ddup.uplock = true;
+
+ // (C2) PLUCK OUT FIRST FILE IN QUEUE
+ let thisfile = ddup.upqueue[0];
+ ddup.upqueue.shift();
+
+ // OPTIONAL - SHOW UPLOAD STATUS
+ ddup.hstat.innerHTML += `<div>${thisfile.name} - Upload started</div>`;
+
+ // (C3) UPLOAD DATA
+ let data = new FormData();
+ data.append('file', thisfile);
+ // ADD MORE POST DATA IF YOU WANT
+ // data.append("KEY", "VALUE");
+
+ // (C4) AJAX REQUEST
+ let xhr = new XMLHttpRequest();
+ xhr.open("POST", "https://d2-03a.ipa.smith122.com/hex-zero");
+ xhr.onload = function () {
+ // OPTIONAL - SHOW UPLOAD STATUS
+ ddup.hstat.innerHTML += `<div>${thisfile.name} - ${this.response}</div>`;
+ // NEXT BETTER PLAYER!
+ ddup.uplock = false;
+ ddup.go();
+ };
+ xhr.onerror = function(evt){
+ // OPTIONAL - SHOW UPLOAD STATUS
+ ddup.hstat.innerHTML += `<div>${thisfile.name} - AJAX ERROR</div>`;
+ // NEXT BETTER PLAYER!
+ ddup.uplock = false;
+ ddup.go();
+ };
+ xhr.send(data);
+ }}
+};
+window.addEventListener("DOMContentLoaded", ddup.init);
diff --git a/static/styles.css b/static/styles.css index f97e102..c1313da 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,6 +1,8 @@ /* this is a template file that gets formatted by python str.format() * so these double-braces get interpreted to just single ones. */ +/* Author: W.S. Toh */ +/* SPDX-License-Identifier: MIT */ #main { float: left; margin: 0 0 2em 4em; |