Open a file input box on button click in React

Open a file input box on button click in React #

To open a file input box on button click in React:

1. Set the onClick prop on a button element.
2. Set the ref prop on the file input.
3. When the button gets clicked, open the file input box, e.g. inputRef.current.click().

Copied!
import {useRef} from 'react';

const App = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    // 👇️ open file input box on click of other element
    inputRef.current.click();
  };

  const handleFileChange = event => {
    const fileObj = event.target.files && event.target.files[0];
    if (!fileObj) {
      return;
    }

    console.log('fileObj is', fileObj);

    // 👇️ reset file input
    event.target.value = null;

    // 👇️ is now empty
    console.log(event.target.files);

    // 👇️ can still access file object here
    console.log(fileObj);
    console.log(fileObj.name);
  };

  return (
    <div>
      <input
        style={{display: 'none'}}
        ref={inputRef}
        type="file"
        onChange={handleFileChange}
      />

      <button onClick={handleClick}>Open file upload box</button>
    </div>
  );
};

export default App;

We used the useRef hook to get access to the file input element.

When we pass a ref prop to an element, e.g. <input type="file" ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

We can call the click() method, e.g. ref.current.click() to simulate a mouse click on the file input element.

Notice that we set the display property of the file input to none to hide it.

Now when the user clicks on the button element, we simulate a click on the file input using the ref object and the file upload box opens.

This approach works any any type of element, e.g. a div or an icon. Simply set the onClick prop on the element and simulate a click on the file input when the element gets clicked.