Open an input file on a button click in React

The default input file upload button design is unattractive. You may need to upload a file when an external div or button is clicked, therefore today we'll teach you how to open an input file in React when a button is clicked.

Checkout more articles on ReactJS

Demo Application

Output - Open an input file on a button click in React - Clue Mediator

Steps to Open an input file on a button click in React

Add button and file input in component
Handle input file event through refs
Output

1. Add button and file input in component

First, we have to add the button and input file in the React component. Make sure input file is hidden via CSS.

App.js

import React, { useState } from 'react';

function App() {

  const [file, setFile] = useState([]);

  const handleChange = e => {
    setFile([...file, e.target.files[0]]);
  }

  return (
    <div class="app">
      <h3>Open an input file on a button click in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h3>

      <button onclick="{()" ==""> { }}>
        <img src="https://www.svgrepo.com/show/12604/paper-clip.svg">
      </button>

      <input type="file" onchange={handleChange}>

      <strong>Uploaded Files:</strong> {file.map(x => x.name).join(', ')}
    </div>
  );
}

export default App;

index.css

button {
  cursor: pointer;
  background: transparent;
  border: 0;
}

button:focus {
  outline: none;
}

button img {
  width: 20px;
  height: 20px;
}

input[type=file] {
  display: none;
}

2. Handle input file event through refs

Now let’s trigger the input file `onChange` event on a button click using `refs`. Here, we will use the useRef Hook to trigger the function.

First, create a input ref hook.

const inputFile = useRef(null);

Then set it to the input file.

<input type="file" onchange={handleChange} ref={inputFile}>

Now, trigger the click event using `ref` via the button click event.

<button onclick="{()" ==""> inputFile.current.click()}>
  <img src="https://www.svgrepo.com/show/12604/paper-clip.svg">
</button>

3. Output

Put all the code together and see how it looks.

App.js

import React, { useState, useRef } from 'react';

function App() {

  const [file, setFile] = useState([]);
  const inputFile = useRef(null);

  const handleChange = e => {
    setFile([...file, e.target.files[0]]);
  }

  return (
    <div class="app">
      <h3>Open an input file on a button click in React - <a href="https://www.cluemediator.com" target="_blank" rel="noreferrer noopener">Clue Mediator</a></h3>

      <button onclick="{()" ==""> inputFile.current.click()}>
        <img src="https://www.svgrepo.com/show/12604/paper-clip.svg">
      </button>

      <input type="file" onchange={handleChange} ref={inputFile}>

      <strong>Uploaded Files:</strong> {file.map(x => x.name).join(', ')}
    </div>
  );
}

export default App;

Run the application and check the output in the browser.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project