JSFiddle - React, Tailwind, and code Playground

by amantur

HTML

<div id="dummy" class="dummyDiv"> 
    <span>
        click to chose file:
    </span>
 <span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
    <input type="file" id="flupld" />
</div>

CSS

.dummyDiv {
    width:450px;
    border:3px dashed #900;
    background-color:#300;
    text-align:left;
    color:white;
    text-align:left;
    padding:10px;
}
.yellow{color:yellow}
.wrapper {
    display:none;
}

JavaScript

$("#dummy").click(function () {
    $("#flupld").click();
});

$("#flupld").change(function () {
    var file=$(this).val().replace(/C:\\fakepath\\/ig,'');
    
    $("#fileName").text(file);
});