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) {
        
        // Ref to the old image
        var oldImg = document.getElementById('imageSpan');
            
        // Remove the old image 
        if (oldImg) {    
            document.getElementById('list').removeChild(oldImg);
        }
            
        // Render thumbnail.
        var span = document.createElement('span');
        
            if(a!==0) 
            span.innerHTML = "";
            span.id = "imageSpan";
            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);