JSFiddle - React, Tailwind, and code Playground

HTML

<header>

  </header>
  <section role="main">
    <input id=fu name=files[] type=file accept=image/* /> <!-- multiple  -->
    <aside>
    <span id=fileName></span>
    <span id=fileSize></span>
    <span id=fileType></span>
    <output id="list"></output>
    </aside>
  </section>
  <footer>
<!--HTML5BOILERPLATE
PIXASTIC-->
  </footer>

CSS

body, html {
    width: 100%;
    height: 100%;
    min-height: 500px;
    margin: 0 auto;
    background: rgba(1,1,1,.33)
}
body {*padding-top:26.5%}
input {
    border: 2px dashed #BBB;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 2.33rem/100% 900 'Vollkorn';
    color: #BBB;
    vertical-align:middle;
}
section {text-align:center;vertical-align:center;border: 3px solid rgba(33,33,33,.11);border-radius:11px;box-shadow: 0 0 33px 11px rgba(111,233,233,.33);width: 450px;min-width: 444px; padding: 11px;margin:0 auto}
aside {text-align:left; font-family:Georgia;font-size:1.1rem}
aside > span { text-indent:3.3rem;color:white; text-shadow: 0 1px 1px black;display: block}

  img {
    max-width: 100%;
    border: 1px solid lightgray;
    max-height: 555px;
    margin: 11% auto;
    display: block;
    box-shadow: 0 1px 11px 3px rgba(255,255,255,.1);
    border-radius: 3px;
  }

JavaScript

function filesProcess(files) {
         var file = document.getElementById('fu').files[0]; 
         var a = 0;
  if (file) {
    var fileSize = 0;
    if (file.size > 1024 * 1024)
      fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    else
      fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
          
    document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
    document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
           if(a!==0)
            span.innerHTML = "";
          span.innerHTML = ['<img src="', e.target.result,
                            '" title="', theFile.name, '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
          a++;
          console.log(a);
        };
      })(file);

      // Read in the image file as a data URL.
      reader.readAsDataURL(file);
}

document.getElementById('fu').addEventListener('change', filesProcess, false);