First, create ref hook for your input
.
const inputFile = useRef(null)
// or, for TypeScript
// const inputFile = useRef<HTMLInputElement | null>(null);
Then set it to your input
and add a style to display: none
for it, to hide it from the screen.
<input type="file" id='file' ref={inputFile} style={{display: 'none'}}/>
Then create your function to handle the open file. The function should be inside the same function you are using the useRef
hook.
const onButtonClick = () => {
// `current` points to the mounted file input element
inputFile.current.click();
};
Then set the function to the button
element:
<button onClick={onButtonClick}>Open file upload window</button>
API for HTML input file