media-host/static/js/upload.js

document.querySelectorAll(".require-script").forEach(function(e) {
  e.style.display = "inline-block";
});

let oTitle = document.title;

let xhr = new XMLHttpRequest();
xhr.open("GET", "/dummy");
xhr.send();
xhr.onload = function() {
  document.getElementById("jsFileUpload").removeAttribute("disabled");
}

xhr.upload.addEventListener("progress", function(ev) {
  if (ev.lengthComputable) {
    let d = ev.position || ev.loaded;
    let t = ev.totalSize || ev.total;
    let p = `${((d / t) * 100).toFixed(2)}%`;
    if (p == "100.00%") {
      document.getElementById("prgTxt").innerHTML = `Processing...`;
      document.getElementById("prgUpload").style.width = p;
    } else {
      document.getElementById("prgUpload").style.width = p;
      document.getElementById("prgTxt").innerHTML = `Uploading... <code>(${p})</code>`;
    }
  } else {
    let d = ev.position || ev.loaded;
    document.getElementById("prgTxt").innerHTML = `Uploading... (Unknown percentage, <code>${d}</code> bytes sent)`;
  }
  console.log(ev);
});

xhr.addEventListener("progress", function(ev) {
  if (ev.lengthComputable) {
    let d = ev.position || ev.loaded;
    let t = ev.totalSize || ev.total;
    let p = `${((d / t) * 100).toFixed(2)}%`;
    
    if (p == "100%") {
      document.getElementById("prgTxt").innerHTML = `Please wait, we're processing your file.`;
    } else {
      document.getElementById("prgUpload").style.width = p;
      document.title = `[${p}] ${oTitle}`;
      document.getElementById("prgTxt").innerHTML = `Uploading... <code>(${p})</code>`;
    }
  } else {
    let d = ev.position || ev.loaded;
    document.getElementById("prgTxt").innerHTML = `Uploading... (Unknown percentage, <code>${d}</code> bytes sent)`;
  }
  console.log(ev);
});

function upload() {
  console.log("setting up");
  xhr.open("POST", "/upload?json=1");
  let f = document.getElementById("jsFileUpload").files[0];
  
  if (f == undefined) return;
  
  let fd = new FormData();
  fd.append("file", f);
  fd.append("privacy", document.getElementById("privacy").value);
 
  if (xhr.readyState != 1) xhr.abort()
  xhr.send(fd);
  document.getElementById("progress").style.display = "inline-block";
  document.getElementById("prgUpload").style.width = "0%";
  document.getElementById("prgTxt").style.display = "inline-block";
  document.getElementById("prgBar").style.display = "inline-block";
  document.getElementById("prgTxt").innerHTML = `Preparing to upload...`;
  document.getElementById("jsFileUpload").setAttribute("disabled", "");
  document.querySelectorAll(".err").forEach(function(e) {
    e.remove();
  });

  if (document.querySelector(".hc-container")) document.querySelector(".hc-container").style.display = "none";

  xhr.onload = function() {
    document.getElementById("jsFileUpload").removeAttribute("disabled");
    console.log(xhr.responseText);
    let j = JSON.parse(xhr.responseText);
    if (j == null) {
      document.getElementById("prgTxt").style.display = "none";
      let er = document.createElement("div");
      er.classList.add("err");
      let et = document.createElement("p");
      et.innerHTML = "Response was invalid.";
      er.append(et);
      document.getElementById("progress").append(er);
    } else {
      if (j.success) {
        document.getElementById("prgUpload").style.width = "100%";
        if (j.requireCaptcha == true) {
          document.querySelector(".hc-container").style.display = "block";
          document.getElementById("prgUpload").style.width = "0%";
          document.getElementById("prgTxt").style.display = "none";
          document.getElementById("prgBar").style.display = "none";

          let er = document.createElement("div");
          er.classList.add("err");
          let et = document.createElement("p");
          et.innerHTML = "Please complete the CAPTCHA to keep your upload permanent.";
          er.append(et);
          document.getElementById("progress").append(er);

          hcaptcha.render("cpt", {
            sitekey: document.querySelector(".hc-container").getAttribute("data-sitekey")
          });
          document.title = `[CAPTCHA] ${oTitle}`;
          sessionStorage.setItem(`current-upload-id`, j.data.id);
        } else document.getElementById("prgTxt").innerHTML = `Uploaded. <a href="/f/${j.data.id}">${window.location.href.split("/").slice(0, 3).join("/")}/f/${j.data.id}</a>`;  
      } else {
        console.log(j);
        document.getElementById("prgTxt").style.display = "none";
        let er = document.createElement("div");
        er.classList.add("err");
        let et = document.createElement("p");
        et.innerHTML = j.err;
        er.append(et);
        document.getElementById("progress").append(er);
      }
    }
  }

  xhr.onerror = function(e) {
    document.getElementById("jsFileUpload").removeAttribute("disabled");
    console.log(e, xhr.statusText);
    document.getElementById("prgTxt").style.display = "none";
    let er = document.createElement("div");
    er.classList.add("err");
    let et = document.createElement("p");
    et.innerHTML = (e.message || e.stack || e.code || JSON.stringify(e));
    er.append(et);
    document.getElementById("progress").append(er);
  }
}

function sendCaptcha(response) {
  let fd = new FormData();
  fd.append("h-captcha-response", response);

  document.querySelector(".hc-container").style.display = "none";
  hcaptcha.reset();

  document.getElementById("prgBar").style.display = "inline-block";
  document.getElementById("progress").style.display = "inline-block";
  document.getElementById("prgUpload").style.width = "0%";
  document.getElementById("prgTxt").style.display = "inline-block";
  document.getElementById("prgTxt").innerHTML = `Preparing to send CAPTCHA...`;

  document.querySelectorAll(".err").forEach(function(e) {
    e.remove();
  });

  xhr.open(`POST`, `/f/${sessionStorage.getItem(`current-upload-id`)}/confirm`);
  xhr.send(fd);
  xhr.onload = function() {
    console.log(xhr.responseText);
    let j = JSON.parse(xhr.responseText);

    if (j.success == true) {
      document.getElementById("prgTxt").innerHTML = `Uploaded. <a href="/f/${sessionStorage.getItem("current-upload-id")}">${window.location.href.split("/").slice(0, 3).join("/")}/f/${sessionStorage.getItem("current-upload-id")}</a>`;  
      sessionStorage.removeItem("current-upload-id");
    } else {
      hcaptcha.reset();
      document.getElementById("prgTxt").style.display = "none";
      let er = document.createElement("div");
      er.classList.add("err");
      let et = document.createElement("p");
      et.innerHTML = j.err;
      er.append(et);
      document.getElementById("progress").append(er);
    }
  }
}