react open file browser on click a div

Question

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