JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" multiple>

JavaScript

document.querySelector("input").onchange = function() {
  var files = this.files;
  for (var i = 0; i < files.length; i++) {
    // Create transfer object
    (function(curr) {
      // `i` : `curr`
      var xhr = new XMLHttpRequest();
      var progress = document.createElement("progress");
      progress.setAttribute("value", 0);
      progress.setAttribute("max", files[curr].size);
      document.body.appendChild(progress);
      progress.className = "progress-" + curr;
      // Attach progress event handler
      xhr.upload.addEventListener("progress", function(e) {
        // update current `progress` `value`
        document.querySelector(".progress-" + curr).value = e.loaded;
      });
      xhr.open("POST", "/echo/html/");
      xhr.onload = function() {
        console.log(this.responseText);
        var img = new Image;
        img.onload = function() {
          document.body.appendChild(this)
        }
        img.src = this.responseText;
      }
      var reader = new FileReader();
      reader.onload = function() {
        xhr.send("html=" +  encodeURIComponent(reader.result))
      }
      reader.readAsDataURL(files[curr]);
    }(i)); // pass `i` to IIFE
  }
}