JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="txtFile" readonly="true" />
<input type="button" id="btn" value="Browse" onclick="browseFile();" />
<input type="file" id="file1" name="file1" onchange="setFileName(this.value);" />

CSS

#file1 {
    display: none;
}

JavaScript

function browseFile() {
    document.getElementById('file1').click();
}

function setFileName(fileName) {
    
    /* Manipulate file name here */
    fileName = fileName.substr(0, fileName.lastIndexOf('.'));
    document.getElementById('txtFile').value = fileName;
}