nopaque/app/static/js/opaque.js

function sendNewJobFormData(newJobFormElement, progressModalElement, request) {
  var formData;
  var progress;
  var progressModal;
  var request;

  formData = new FormData(newJobFormElement);
  progressModal = M.Modal.getInstance(progressModalElement);

  progressModal.options.dismissible = false;
  progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
  request.upload.addEventListener("progress", function(event) {
    progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
    progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
    progressModalElement.querySelector(".determinate").style.width = progressInPercent;
  });
  request.addEventListener("load", function(event) {
    newJobFormElement.reset();
    location.reload();
  });
  request.addEventListener("abort", function(event) {
    progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
    progressModalElement.querySelector(".determinate").style.width = "0%";
  });

  progressModal.open();
  request.open("POST", window.location.href);
  request.send(formData);
}

function initNewJobForm(newJobFormElement, progressModalElement) {
  var request;

  request = new XMLHttpRequest();

  newJobFormElement.addEventListener("submit", function(event) {
    event.preventDefault();
    sendNewJobFormData(newJobFormElement, progressModalElement, request);
  });

  progressModalElement.querySelector(".cancel").addEventListener("click", function(event) {
    request.abort();
  });
}