How to read and upload a file in reactjs using custom button

Question

I want to upload and read a file locally, but I want to do that using a custom button not using HTML input.

<input type="file" id="my_file_input" />

I found this way but I don't want to use this shape or this button, I wanted to use a material UI Raised Button to do this functionality to match the other site Button.

I also tried the following way but it didn't work because as i clicked the button nothing happened.

<input type="file" id="my_file_input" style={{display:"none"}}/>
<label htmlFor="my_file_input">
    <RaisedButton
        label="Import from Excel"
        labelColor="#FFFFFF"
        backgroundColor="#01579b"
        />
</label>

I thought I should do the uploading/reading file functionality manually in the onClick function of the RaisedButton but I didn't find a way to do that.

So is there any other solution for this problem in react?

Answer 1

I wanted to provide an update for using refs with functional components. Here is a quick example:

Import React, {useRef} from 'React'

const myComponent = () => {
  const fileInputRef=useRef();
  
  const handleChange(event) = () =>{
    // do something with event data

  }
  
  return(
    <>
      <button onClick={()=>fileInputRef.current.click()}>
        Custom File Input Button
      </button>
      <input onChange={handleChange} multiple={false} ref={fileInputRef} type='file'hidden/>
    </>
  )
}

Answer 2

I hope this code will help you. We can solve it in two ways.

1-)

HTML

<div>
<input type="file" hidden ref={this.inputReference} onChange={this.fileUploadInputChange} />
<button className="ui button" onClick={this.fileUploadAction}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

REACT CONSTRUCTOR

constructor(props) {
    super(props);
    this.state={fileUploadState:""}
    this.inputReference = React.createRef();
}

ONCLICK FUNCTION

fileUploadAction = () =>this.inputReference.current.click();
fileUploadInputChange = (e) =>this.setState({fileUploadState:e.target.value});

2-)

HTML

<div>
<input id="fileButton" type="file" hidden />
<button onClick={this.fileUploadButton}>
    Image Upload
</button>
{this.state.fileUploadState}
</div>

React State

this.state = {fileUploadState:""}

React Function

fileUploadButton = () => {
document.getElementById('fileButton').click();
document.getElementById('fileButton').onchange = () =>{      
this.setState({
    fileUploadState:document.getElementById('fileButton').value
        });
    }
}