nopaque/app/static/js/add_job.js

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

  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) {
    if (request.status === 201) {
      window.location.href = JSON.parse(this.responseText)['redirect_url'];
    }
    if (request.status === 400) {
      console.log(JSON.parse(this.responseText));
      // TODO print errors under input fields.
    }
    if (request.status === 500) {
      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 initAddJobForm(addJobFormElement, progressModalElement) {
  var request;

  request = new XMLHttpRequest();

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