JSFiddle - React, Tailwind, and code Playground

HTML

<form name="frmUpload">
<!-- Real Input field, but hidden-->
<input type="file" name="myFile" style="display: none">
<!-- Fake field to fool the user -->
<input type="text" name="txtFakeText" readonly>
<!-- Button to invoke the click of the File Input -->
<input type="button" onClick="HandleFileButtonClick();" value="Upload File" class="upload" >
</form>

CSS

.upload{background-color:red; border:maroon 2px solid; padding:2px 4px; color:#fff}

JavaScript

function HandleFileButtonClick()
    {
        document.frmUpload.myFile.click();
        document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
    }