AJAX Progress Bar

by Manuel Rojas

HTML

<progress id="progress" value="0"></progress>
<button id="button">Start uploading</button>
<span id="display"></span>

JavaScript

var progressBar = document.getElementById("progress"),
  loadBtn = document.getElementById("button"),
  display = document.getElementById("display");

function download(data) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://www.tajamar.es/ited/api/includes/update-apps.php", true);
  if (xhr.download) {
    xhr.download.onprogress = function(e) {
      if (e.lengthComputable) {
        progressBar.max = e.total;
        progressBar.value = e.loaded;
        display.innerText = Math.floor((e.loaded / e.total) * 100) + '%';
      }
    }
    xhr.download.onloadstart = function(e) {
      progressBar.value = 0;
      display.innerText = '0%';
    }
    xhr.download.onloadend = function(e) {
      progressBar.value = e.loaded;
      loadBtn.disabled = false;
      loadBtn.innerHTML = 'Start uploading';
    }
  }
  xhr.send(data);
}

function buildFormData() {
  var fd = new FormData();

  for (var i = 0; i < 3000; i += 1) {
    fd.append('data[]', Math.floor(Math.random() * 999999));
  }

  return fd;
}

loadBtn.addEventListener("click", function(e) {
  this.disabled = true;
  this.innerHTML = "Uploading...";
  upload(buildFormData());
});