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>

Ajeet Shah · Accepted Answer · 2021-04-09 06:25:54Z

7

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>
  );
}

edited Apr 9, 2021 at 6:25

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

answered Apr 9, 2021 at 5:18

Goutham J.M

2,23421 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cris Over a year ago

It doesn't work in the sandbox. Returns an error

Goutham J.M Over a year ago

Please check again there was a mistake , I had not saved changes

Ajeet Shah · Accepted Answer · 2021-04-09 05:24:14Z

2

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">

answered Apr 9, 2021 at 5:24

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Comments

Shreyas Sreenivas · Accepted Answer · 2021-04-09 05:26:19Z

1

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>
   )
}

answered Apr 9, 2021 at 5:26

Shreyas Sreenivas

3511 gold badge5 silver badges12 bronze badges

Comments

BTSM · Accepted Answer · 2021-04-09 05:28:05Z

0

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

edited Apr 9, 2021 at 5:28

answered Apr 9, 2021 at 5:10

BTSM

1,6638 gold badges14 silver badges29 bronze badges

3 Comments

cris Over a year ago

whats this.upload?

BTSM Over a year ago

It's ref of input.

BTSM Over a year ago

You can confirm at codesandbox. I added url.

Collectives™ on Stack Overflow

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

Edit:

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit:

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related