JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
   Pick a file to upload:
    <input id="upload-click-handler" type="text" readonly />
    <input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
    <br/>
    <input type="submit" onclick="alert('Now is when your file would get uploaded.');return(false)">
</div>

CSS

.wrapper {
    text-align:left;
}
input[type=text] {
    border: 2px solid #ff8888;
}

JavaScript

$("#upload-box").change(function(){
    $("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
    $("#upload-box").click();
});