In HTML, we have an input element of type file. When we click on it, it will open a window to select a file from the computer. Sometimes we may want to open the window to select files on the click of a button to implement any custom UI in our application. For example, like the image below

When we click on the window, we want to open the system window to select a file.

We can achieve this functionality very easily in React JS by using useRef.

First we need to have an input element and a button. We make the input element invisible and when the user clicks on the button, we trigger click event on the hidden input element.

Example Code:

import React, { useRef } from 'react'

function SelectFileButton() {

    const fileInput = useRef();
    const selectFile = () => {
        fileInput.current.click();
    }

    return (
        <div className='mt-5' >
            <input type="file" style={{ "display": "none" }} ref={fileInput} />
            <button onClick={selectFile} className='btn btn-primary' >
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" className="bi bi-cloud-upload m-1" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
                    <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z" />
                </svg>
                <span className='ms-2' >Upload</span>
            </button>
        </div>
    )
}

export default SelectFileButton

If you want to do it using Vanilla JavaScript, check this post File Selection on the click of a Button in JavaScript