Material-UI File Upload with Button

Question

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.

Does this answer your question? How to enable file upload on React's Material UI simple input? — James Mitofsky
– James Mitofsky, Commented May 2, 2023 at 8:21

Viet Dinh · Accepted Answer · 2020-09-14 19:41:48Z

8

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>

answered Sep 14, 2020 at 19:41

Viet Dinh

2,0261 gold badge10 silver badges21 bronze badges

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

1 Comment

fizmhd Over a year ago

i tried this but wont show if the filename. Is it expected behaviour ?

Collectives™ on Stack Overflow

Material-UI File Upload with Button

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related