How do I make a button trigger a file input onChange in React?

Question

I have an input of type file . For some reason it doesn't let me change the value attribute to it, and it looks ugly. I swapped it with a button, but now I need the button to somehow trigger the input file on click. How can I do this in React?

Edit:

It should trigger the input onClick , not the onChange like the title says. Unless it's the same thing in this case.

const fireInput = () => {
  let input = document.getElementById('inputFile');
}

<div>
  <input 
    id="inputFile"
    type='file'
    className='mt-2 mb-3 text-primary'
    onChange={uploadProfilePic}
  />
  <button
    type='button'
    className='btn btn-primary py-2 px-5 mb-3'
    onClick={fireInput}
  >
  Upload Picture
  </button>
</div>

Answer 1

You can simply use a label:

 .d-none { display: none; }.button { background-color: #123456; color: white; padding: 15px 32px; text-align: center; }

 <label for="inputFile" class="button">Upload</label> <input type="file" id="inputFile" name="inputFile" class="d-none">

Answer 2

You shouldn't put display:none then the element will not be in dom, you need to use opacity:0 or visibility css.

Code for doing above can be done like this:

import "./styles.css";
import { useRef } from "react";

export default function App() {
  const fileUpload = useRef(null);
  const uploadProfilePic = (e) => {
    console.log(e);
  };

  const handleUpload = () => {
    console.log(fileUpload.current.click(), "fileUpload");
  };
  return (
    <div className="App">
      <input
        type="file"
        ref={fileUpload}
        onChange={uploadProfilePic}
        style={{ opacity: "0" }}
      />
      <button onClick={() => handleUpload()}>Upload Picture</button>
    </div>
  );
}

Answer 3

You could use the html label element without using any JS:

const Component = () => {
  // You should also use a ref instead of document.getElementById
  const inputRef = useRef() 

  return (
    <label>
      <div> {/*Style this however you want*/}
        Upload Photo
      </div>
      <input type="file" style={{display: "none"}} ref={inputRef} />
    </label>
   )
}

Answer 4

I think you can do like this.

<div>
  <input type="file" onChange={uploadProfilePic} ref={(ref) => this.upload = ref} style={{ display: 'none' }}/>
  <button                
    type='button'
    className='btn btn-primary py-2 px-5 mb-3'
    onClick={(e) => this.upload.click()}
  >
    Upload Picture
  </button>
</div>
                                
                                

You can confirm here.

https://codesandbox.io/s/youthful-cdn-lpntx