JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="upload" name="files[]" multiple/>
<output id="list"></output>
<output id="list2"></output>

CSS

.thumb {
  height: 150px;
  border: 1px solid #000;
  margin: 5px 5px 5px 5px;
}

JavaScript

function handleFileSelect(evt, x = false) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    var reader = new FileReader();

    reader.onload = (function(theFile) {
      return function(e) {
        // Render thumbnail.
        var span = document.createElement('span');
        span.innerHTML = ['<img class="thumb" src="', e.target.result,
          '" title="', escape(theFile.name), '"/>'
        ].join('');
        document.getElementById('list').insertBefore(span, null);
        var span2 = document.createElement('span');
        span2.innerHTML = ['<img class="thumb" src="', e.target.result,
          '" title="', escape(theFile.name), '"/>'
        ].join('');
        document.getElementById('list2').insertBefore(span2, null);
      };
    })(f);

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

document.getElementById('upload').addEventListener('change', handleFileSelect, false);