JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
   <input type="file" id="fileSelector" />

   <ul id="fileContentList" style="list-style-type: none;"></ul>

  </body>

JavaScript

document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false); 
      
      function handleFileSelection(evt) {    
        var files = evt.target.files; 
  
        if (!files) {
          alert("<p>At least one selected file is invalid .</p>");
          return;
        }

        for (var i = 0; file = files[i]; i++) {
          var img = document.createElement('img'); 
          img.src = window.URL.createObjectURL(file);

          img.width = 150;
          img.onload = function(){ window.URL.revokeObjectURL(this.src); }
          
          var span = document.createElement('span');
          span.innerHTML = file.name;
          
          var li = document.createElement('li');
          li.appendChild(img);
          li.appendChild(span);
          
          document.getElementById('fileContentList').appendChild(li);
        } 
      }