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?

You can do this with HTML/CSS: Replace input file with my own button in the form — Heretic Monkey
– Heretic Monkey, Commented Feb 13, 2019 at 15:04
Sure it does. The solution does not depend on JavaScript, and React is JavaScript. If you really can't get it working, edit your question to include a minimal reproducible example, showing how you implemented it and how it "doesn't work". You can use Stack Snippets to create a runnable snippet here on Stack Overflow. — Heretic Monkey
– Heretic Monkey, Commented Feb 13, 2019 at 15:18

Ken · Accepted Answer · 2024-07-25 04:16:09Z

18

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

edited Jul 25, 2024 at 4:16

answered May 17, 2021 at 17:31

Ken

9021 gold badge9 silver badges15 bronze badges

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

1 Comment

James Over a year ago

you have errors in your code

joeb · Accepted Answer · 2020-05-14 15:42:56Z

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

shutsman · Accepted Answer · 2019-02-13 16:15:18Z

2

please read API of React Material https://material-ui.com/demos/buttons/

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <input
        accept="image/*"
        className={classes.input}
        id="contained-button-file"
        multiple
        type="file"
      />
      <label htmlFor="contained-button-file">
        <Button variant="raised" component="span" className={classes.button}>
          Upload
        </Button>
      </label>
    </div>
  );
}

ContainedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ContainedButtons);

answered Feb 13, 2019 at 16:15

shutsman

2,5101 gold badge17 silver badges26 bronze badges

1 Comment

Ken Over a year ago

I feel like there has to be a better way other than using a label as a button. I know sometimes it is hard to use semantic HTML in React depending on what you are trying to do, but it is good to try using semantic HTML where you can.

Raul Leaño Martinet · Accepted Answer · 2020-05-28 08:48:59Z

2

As the doc says, you just need to add:

component="span"

To the button component.

answered May 28, 2020 at 8:48

Raul Leaño Martinet

2,1136 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1-)

HTML

REACT CONSTRUCTOR

ONCLICK FUNCTION

2-)

HTML

React State

React Function

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1-)

HTML

REACT CONSTRUCTOR

ONCLICK FUNCTION

2-)

HTML

React State

React Function

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related