JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <p><button id="upload_button">Choose File</button></p>
    <p><input  id="upload_input" name="your_name" type="file"/></p>
</form>

CSS

#upload_button {
    display: none;
    
    color: #FFF;
    background: #93BF0D;
    border: 1px solid #93BF0D;
    font-weight: bold;
    padding: 0.6em 1.1em;
    font-size: 1em !important;
    border-radius: 5px;
}

JavaScript

var button = document.getElementById('upload_button');
var input  = document.getElementById('upload_input');

// Making input invisible, but leaving shown fo graceful degradation
input.style.display = 'none';
button.style.display = 'initial';

button.addEventListener('click', function (e) {
    e.preventDefault();
    
    input.click();
});

input.addEventListener('change', function () {
   button.innerText = this.value; 
});