How to open an with a button click in React

Question

How can I open an file input with a button click ? My code :

<Button variant="outlined">
      Choose Image
    </Button>
     <input
      type="file"
      id="input_file"
      accept=".jpg,.jpeg,.png"
      style={{ display: 'none' }}
     />

To clarify: you want the browser to pop up windows explorer so the user chan a choose a file to upload when the button is clicked? — Pelicer, Sep 24 '21 at 11:31

score 4 · Answer 1 · edited Aug 23 '22 at 11:43

4

React >= 16.8 , using `useRef` hook

import React, { useRef } from 'react'

const MyComponent = () => {
  const ref = useRef()
  const handleClick = (e) => {
    ref.current.click()
  }
  return (
    <>
      <button onClick={handleClick}>Upload Image</button>
      <input ref={ref} type="file" />
    </>
  )
}

export default MyComponent

edited Aug 23 '22 at 11:43

hiddensunset4

5,825
3
39
61

answered Jun 05 '22 at 14:28

Jamal Eddine Naamani

334
2
7

It works on my scenario perfectly: use ref to trigger file upload window from an image's click event, really thanks! (I wasted almost whole day on this) – nonemaw Aug 10 '23 at 13:04

score 0 · Answer 2 · answered Sep 24 '21 at 11:42

  const Open = () => { 
    document.getElementById('get_file').onclick = function() { 
      document.getElementById('input_file').click();}}

    <button id="get_file" variant="outlined" onClick={() => Open() } > Choose Image </button> 
    <input type="file" id="input_file" accept=".jpg,.jpeg,.png" style={{ display: 'none' }} />

You have a answer here How to link an input button to a file select window

How to open an with a button click in React

2 Answers2

React >= 16.8 , using useRef hook

React >= 16.8 , using `useRef` hook