JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <form method="post" class="main-form">
    <input type="file" name="images" id="upload-photo" multiple hidden>
    <label for="upload-photo">
      <div>Upload img</div>
    </label>
  </form>
  <script src="js/script.js"></script>
</body>

CSS

input[type="file"] ~ label div {
  width: 150px;
  margin-top: 20px;
  padding: 10px 0;
  
  text-align: center;
  color: black;

  background: #c2c2c2;
  border: 3px solid black;

  cursor: pointer;
}

input[type="file"] ~ label div:hover {
  background: pink;
}

JavaScript

(function() {

  if (!("FormData" in window)) {
    return;
  }

  var form = document.querySelector(".main-form");

  form.addEventListener("submit", function (event) {
    event.preventDefault();

    var data = new FormData(form);

    request(data, function(response) {
      console.log(response);
    });
  });



  if ("FileReader" in window) {
    form.querySelector("#upload-photo").addEventListener("change", function () {

      var files = this.files;

      for (var i = 0; i < files.length; i++) {
        preview(files[i]);
      }
    });
  }


  function request(data, fn) {

    var xhr = new XMLHttpRequest();

    xhr.open("post", "/send?" + (new Date()).getTime());

    xhr.addEventListener("readystatechange", function () {
      if (xhr.readyState == 4) {
        fn(xhr.responseText);
      }
    });

    xhr.send(data);
  }


  function preview(file) {

    if (file.type.match(/image.*/)) {
      var reader  = new FileReader();

      reader.addEventListener("load", function(event) {
        var img = document.createElement('img');
        img.src = event.target.result;
        img.alt = file.name;

        document.body.appendChild(img);
      });

      reader.readAsDataURL(file);
    }
  }
})();