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) {
    progressModalElement.querySelector(".loaded").innerHTML = event.loaded.toString();
    progressModalElement.querySelector(".total").innerHTML = event.total.toString();
    progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
  });
  request.addEventListener("load", function(event) {
    newJobFormElement.reset();
    location.reload();
  });

  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();
  });
}