nopaque/app/static/js/opaque.js

function sendNewJobFormData(form, progress) {
  var XHR = new XMLHttpRequest();
  var FD = new FormData(form);
  XHR.upload.addEventListener("progress", function(event) {
    progress.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
  });
  XHR.addEventListener("loadend", function(event) {
    form.reset();
    location.reload();
  });
  XHR.open("POST", window.location.href);
  XHR.send(FD);
}
function initNewJobForm(newJobFormElement) {
  newJobFormElement.addEventListener("submit", function(event) {
    event.preventDefault();
    var toast = M.toast(
      {html: `<div class="row">
                <div class="col s12">${this.title.value}</div>
                <div class="col s12">
                  <div class="progress">
                    <div class="determinate" style="width: 0%"></div>
                  </div>
                </div>
              </div>`,
       displayLength: Infinity}
    );
    sendNewJobFormData(this, toast.el.querySelector(".progress"));
  });
}