How to customize file input in react.js - html

Question

This is the image I need as a output can anybody let me know any solution to this. Here I want the file path to display in place of "set output path" I have already given the css to the button and its uploading the file but I need the path or file name at the place of "set output path"
Function DataExtractor(){
const uploadFiles=()=>{
document.getElementById('selectFile').click()
}
return(
<div>
<label>Set Output Path:</label>
<input type="text" placeholder="Set output path">
</div>
<div>
<button className="btn-1" onClick={uploadFiles}>Browse path</button>
<input type="file" id="selectFile" style={{display:"none"}}/>
</div>)}
)}
export default DataExtractor

Answer 1

You can access the file name as e.target.files[0] in onChange function. Something like this:
function DataExtractor() {
const [selectedFile, setSelectedFile] = useState('')
const uploadFiles = () => {
document.getElementById('selectFile').click()
}
const handleFileChange = (e) => {
setSelectedFile(e.target.files[0])
}
return (
<>
<div>
<label>Set Output Path:</label>
<input value={selectedFile} type="text" placeholder="Set output path">
</div>
<div>
<button className="btn-1" onClick={uploadFiles}>Browse path</button>
<input type="file" id="selectFile" style={{display:"none"}} onChange={handleFileChange} />
</div>
</>
)
}