JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<input type="file" id="file" name="file" />

<div class="hidden" id="filename"></div>

CSS

.hidden {
    display: none;
}

img {
    display: block;
    max-width: 75%;
    max-height: 75px;
}

JavaScript

function handleFileSelect(event) {
    var file = event.target.files[0];
    
    var content = document.getElementById('filename');
    
    content.style.display = "block";
    content.innerHTML = escape(file.name);

    if (typeof FileReader !== "undefined" && (/image/i).test(file.type)) {
        var img = document.createElement("img");
        content.appendChild(img);
        var reader = new FileReader();
        reader.onload = (function (theImg) {
            return function (event) {
                theImg.src = event.target.result;
            };
        }(img));
        reader.readAsDataURL(file);
    }
        
}

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