JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" /><progress min="0" max="100" value="0"></progress>

JavaScript

var progress = $("progress");
$(":file").change(function(e) {
  var file = e.target.files[0];
  progress.val(0);
  var request = new XMLHttpRequest();
  if (request.upload) {
    request.upload.onprogress = function(event) {
      if (progress.val() == 0) {
        progress.attr("max", event.total)
      }
      if (event.lengthComputable) {
        console.log(event.loaded, event.total)
        progress.val(event.loaded)
      }
    }
    request.onload = function() {
      $("<img>", {src: URL.createObjectURL(file)})
      .appendTo("body");
    }
  };
  request.open("POST", "/echo/html/");
  request.send(file)
})