CODEWITHSUNDEEP
javascripthtmlreactjs
Dominik Kolesar
Dominik Kolesar

Reputation: 120

click redirect from button to file input

Hey is there a smarter way to redirect a click from a button to file input element ? Currently I'm using:

function clickRedirect() {
  document.getElementById("uploadFileButton").click();
}

Works. However I've been clearing any DOM manipulation (outside of appState) in my react project and this is the last bit remaining. I'd like to get rid of it.

Upvotes: 0

Views: 204

Answers (1)

Oded BD
Oded BD

Reputation: 3276

You can use ref with hidden button

<input id="myInput" type="file" ref={(ref) => this.myInput = ref} style={{ display: 'none' }} />
<FloatingActionButton
  className="floatingButton"
  backgroundColor='#293C8E'
  onClick={(e) => this.myInput.click() }
  >
</FloatingActionButton>

attached demo here: https://jsfiddle.net/432yz8qg/58/

Upvotes: 2

Related Questions