JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dummyFilePath" class="dummyFilePath"></div>
<input type="button" value="Browse" onclick="handleBrowse();"/>

<form enctype="multipart/form-data" action="javascript:alert('worked')" method="POST" target="myiframe">

    <input type="file" id="uploadedfile" name="uploadedfile" onchange="displayFilePath(this)" style="display:none"/>
    
    <input type="submit" value="Upload File" />

    <iframe  name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;bottom:2px;"></iframe>
</form>

CSS

.dummyFilePath{
	height:20px; 
	width:auto; 
	min-width: 100px;
	border:1px solid gray; 
	margin-bottom:5px; 
	margin-right:5px;
	margin-top:1px;
}

JavaScript

function handleBrowse(){
    $('#uploadedfile').click();
}
function displayFilePath(obj){
    document.getElementById('dummyFilePath').innerHTML = obj.value;
}