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);

//$("#other").click(function() {
//  $("#target").click();
//});


$('#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 list = $("<ul></ul>");
  $("#filelist").append(list);

  for (var i = 0, f; f = files[i]; i++) {

    var reader = new FileReader();

    reader.onload = (function(f) {
      return function(e) {
        var li = $("<li></li>");
        $(list).append(li);

        var a = $("<a href='#'></a>");
        $(li).append(a);

        $(a).append("<img src='"+e.target.result +"'/>");

        $(a).append("<span class='name'>" + f.name + "</span>");

        $(a).append("<span class='size'>" + bytesToSize(f.size) + "</span>");

        $(li).append("<a href='#remove' class='remove'>remove</a>");
      };
    })(f);

    reader.readAsDataURL(f);

  }
}

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


});