Vanilla javascript download progress.

ReleaseDownload.js

// ==========================================================================
// ReleaseDownload Progress Bar
// ==========================================================================
import AbstractObject from './AbstractObject';

export default class ReleaseDownload extends AbstractObject {

  constructor(el, options) {
    super(el, options);
    this.el = el;
    this.options = options;
    this.createChildren();
    this.initHandlers();
    this.enableListeners();
  }

  createChildren() {
    this.$button = document.getElementById('download');
    this.$progress = document.getElementById('progressbar');
    this.$progressPercent = document.getElementById('progressPercent');
    this.$progressComplete = document.getElementById('progressComplete');
  }

  initHandlers() {
    this.handleButtonClick = this.onButtonClick.bind(this);
  }

  enableListeners() {
    this.$button.addEventListener('click', this.handleButtonClick);
  }

  onButtonClick(e) {
    e.preventDefault();
    let url = e.target.getAttribute('data-url');
    let file = e.target.getAttribute('data-file');

    let request = new XMLHttpRequest();

    request.addEventListener('readystatechange', (e) => {
      if (request.readyState == 2 && request.status == 200) {
        // Download is being started
      } else if (request.readyState == 3) {
        // Download is under progress
      } else if (request.readyState == 4) {
        this.$progressComplete.innerHTML = 'Complete!';
        let anchor = document.getElementById('save-file');
        anchor.download = file;
        anchor.href = window.URL.createObjectURL(request.response);
        anchor.click();   
      }
    });

    request.addEventListener('progress', event => {
      let percent = (event.loaded / event.total) * 100;
      this.$progress.style.width = `${percent}%`;
      this.$progressPercent.innerHTML = `${Math.round(percent).toFixed(0)}%`;
      this.$progress.setAttribute("aria-valuenow", percent);
    });

    request.responseType = 'blob';
    request.open('get', url);
    request.send();
  }
}