JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input type="file" id="fileElem" multiple accept="*" style="display:none">
<a href="#" id="fileSelect">Select some files</a>

JavaScript

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);
document.getElementById('fileElem').addEventListener('change', function (f) {
    [].slice.call(this.files).forEach(function (e) {
        var a = document.createElement("a");
      a.href = window.URL.createObjectURL(e);
        a.innerHTML = e.fileName;
      a.onload = function(e) {
        window.URL.revokeObjectURL(this.src);
      }
      document.body.appendChild(a);
    })
});