JSFiddle - React, Tailwind, and code Playground

HTML

<input accept="image/*" id="fileElem" multiple="" onchange="handleFiles(this.files)" style="display:none" type="file">
<a href="#" id="fileSelect">Select some files</a>
<div id="filelist"></div>

CSS

* {margin: 0;
padding:0;}

#filelist {
  margin:20px; }

#filelist img {
max-width: 370px;
border-radius: 2px;
}

#filelist li {
  position: relative;
  max-width: 370px;
}

#filelist span {
position: absolute;
right: 0.3em;

background: #000;
color: #f3f1ed;
padding: 0 0.25em;
border-radius: 2px;
}

#filelist span.size {
top: 1.7em;
}

#filelist span.name {
top: 0.3em;
}

#filelist .remove {
  position: absolute;
  right: 0.3em;
  bottom: 0.5em;

  background: #A33B58;
  color: #f3f1ed;
  padding: 0 0.25em;
  border-radius: 2px;
  display: none;
}
#filelist li:hover .remove {
  display: block;
}

body {background: #f3f1ed;}

ul {list-style: none}

JavaScript

$(document).ready(function() {

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

$('#fileElem').change(function()
{
  handleFiles(this.files);
});


function bytesToSize(bytes) {
  var kilobyte = 1024;
  var megabyte = kilobyte * 1024;
  var gigabyte = megabyte * 1024;
  var terabyte = gigabyte * 1024;

  if ((bytes >= 0) && (bytes < kilobyte)) {
    return bytes;

  } else if ((bytes >= kilobyte) && (bytes < megabyte)) {
    return (bytes / kilobyte).toFixed(0) + 'K';

  } else if ((bytes >= megabyte) && (bytes < gigabyte)) {
    return (bytes / megabyte).toFixed(1) + 'M';

  } else if ((bytes >= gigabyte) && (bytes < terabyte)) {
    return (bytes / gigabyte).toFixed(2) + 'G';

  } else if (bytes >= terabyte) {
    return (bytes / terabyte).toFixed(2) + 'T';

  }
}


function handleFiles(files) {
  var d = document.getElementById("filelist");
  var list = document.createElement("ul");
  d.appendChild(list);
  for (var i=0; i < files.length; i++) {
    var li = document.createElement("li");
    list.appendChild(li);

    var a = document.createElement("a");
    a.setAttribute('href','#');
    a.setAttribute('alt','');
    li.appendChild(a);

    var img = document.createElement("img");
    img.src = window.URL.createObjectURL(files[i]);;
    img.onload = function() {
      window.URL.revokeObjectURL(this.src);
    }
    a.appendChild(img);

    var name = $("<span class='name'>" + files[i].name + "</span>");
    $(a).append(name);

    var size = $("<span class='size'>" + bytesToSize(files[i].size) + "</span>");
    $(a).append(size);

    var remove = $("<a href='#remove' id=" + i + " class='remove'>remove</a>");
    $(li).append(remove);

  }
}

$('.remove').live("click", function(event) {
  event.preventDefault();
  alert("Handler for .click()...