1 files changed, 139 insertions, 0 deletions
diff --git a/templates/upload.js.j2 b/templates/upload.js.j2
new file mode 100644
index 0000000..28fe892
--- /dev/null
+++ b/templates/upload.js.j2
@@ -0,0 +1,139 @@
+{% set prefix_s = prefix | trim('/') ~ '/' %}{% set s_prefix_s = ( '/' ~ prefix | trim('/') ~ '/' ) | replace ("//","/") %}{% set ulp_s = ulp | trim('/') ~ '/' %}{% set server_prefix = ( server | replace("//","##") ~ '/' ~ prefix ~ '/' ) | replace("///","/") | replace("//", "/") | replace("##","//") %}{% set prefix_ulp = ( '/' ~ prefix ~ '/' ~ ulp ~ '/' ) | replace("///","/") | replace("//", "/") %}{% set server_prefix_ulp = ( server | replace("//","##") ~ '/' ~ prefix ~ '/' ~ ulp ~ '/' ) | replace("///","/") | replace("//", "/") | replace("##","//") %}
+/* vim:set syntax=javascript ts=2 sw=2 sts=2 et: */
+var ddup = {
+  // (A) ON PAGE LOAD
+  hzone: null, // HTML upload zone
+  hstat: null, // HTML upload status
+  hform: null, // HTML upload form
+  hiddenfirst: null,
+  init : function () {
+    // (A1) GET HTML ELEMENTS
+    ddup.hzone = document.getElementById("upzone");
+    ddup.hstat = document.getElementById("upstat");
+    ddup.hform = document.getElementById("upform");
+    ddup.hiddenfirst = document.getElementById("hiddenfirst");
+
+    // (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.innerHTML = "Release to upload";
+      });
+      ddup.hzone.addEventListener("dragleave", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        ddup.hzone.classList.remove('highlight');
+        ddup.hzone.innerHTML = "Drop Files Here";
+      });
+
+      // 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.hiddenfirst.style.display = "block" ;
+        if (e.dataTransfer.files.length > 0) {
+          ddup.hzone.classList.add('processing');
+          ddup.hzone.innerHTML = "Uploading...";
+          ddup.queue(e.dataTransfer.files);
+        } else {
+          ddup.hzone.classList.add('invalid');
+          ddup.hzone.innerHTML = "Input is not recognized!";
+          ddup.reset_text_timer(1500);
+        }
+      });
+    }
+
+    // (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.thisdiv = document.getElementById(f.name);
+      if (!ddup.thisdiv) {
+        // add new div with filename as id
+        ddup.hstat.innerHTML += `<div id="${f.name}">${f.name} - Added to queue</div>`;
+      } else {
+        // change contents of existing div
+        ddup.thisdiv.innerHTML = `${f.name} - Added to queue`;
+      }
+      // 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.thisdiv = document.getElementById(thisfile.name);
+    ddup.thisdiv.innerHTML = `${thisfile.name} - Upload started`;
+    // at start of queue, change color
+    ddup.hzone.classList.add('processing');
+    ddup.hzone.innerHTML = "Uploading...";
+
+    // (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", "{{ server_prefix_ulp }}");
+    xhr.setRequestHeader("lastModified", thisfile.lastModified/1000);
+    xhr.onload = function () {
+      // OPTIONAL - SHOW UPLOAD STATUS
+      ddup.thisdiv.innerHTML = `${thisfile.name} - ${this.response}`;
+      // NEXT BETTER PLAYER!
+      ddup.hzone.classList.remove('processing');
+      ddup.hzone.innerHTML = "Drop Files Here";
+      ddup.uplock = false;
+      ddup.go();
+    };
+    xhr.onerror = function(evt){
+      // OPTIONAL - SHOW UPLOAD STATUS
+      ddup.thisdiv.innerHTML = `${thisfile.name} - AJAX ERROR`;
+      // NEXT BETTER PLAYER!
+      ddup.hzone.classList.remove('processing');
+      ddup.hzone.innerHTML = "Drop Files Here";
+      ddup.uplock = false;
+      ddup.go();
+    };
+    xhr.send(data);
+  } },
+
+  reset_text_timer : function (delay_ms) {
+    setTimeout(function (){
+      ddup.hzone.classList.remove('invalid');
+      ddup.hzone.innerHTML = "Drop Files Here";
+    }, delay_ms);
+  }
+};
+window.addEventListener("DOMContentLoaded", ddup.init);