Material-UI File Upload with Button

Viewed 11560

I'm trying to make a file upload with button clicked however there are some problems.

                  <label>
                        <input
                        style={{ display: 'none' }}
                        type="file"
                        />     
                        <Button variant="contained" color="default">Upload</Button>
                    </label>

Here is my code but file upload doesn't work when clicked on the button, so input is not detected. How can I fix that?

I'm using React and Material-UI.

1 Answers

You may miss the id for input:

Let try:

  <input
    style={{ display: "none" }}
    id="contained-button-file"
    type="file"
  />
  <label htmlFor="contained-button-file">
    <Button variant="contained" color="primary" component="span">
      Upload
    </Button>
  </label>
</div>
Related