JSFiddle - React, Tailwind, and code Playground

by Varun Chakervarti

HTML

<span id="upload_text">Upload File</span><input type="file" id="el" style="display:block;margin-top: -20px;opacity: 0;">

CSS

label input[type="file"] 
{
display: block;
margin-top: -20px;
opacity: 0;
}

JavaScript

function handleUpload(e) {
    document.getElementById("upload_text").innerHTML = upload_text+' '+e.target.value;
}
var el = document.getElementById("el");
var upload_text = document.getElementById("upload_text").innerHTML;
el.addEventListener("change", handleUpload, false);