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.

See: https://stackoverflow.com/a/54043619 – phoenix Aug 19 '21 at 17:43 — phoenix, Aug 19 '21 at 17:43

score 5 · Accepted Answer · answered Sep 14 '20 at 19:41

5

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 '20 at 19:41

Viet Dinh

1,757
1
5
17

1

i tried this but wont show if the filename. Is it expected behaviour ? – fizmhd Mar 24 '21 at 08:40

Material-UI File Upload with Button

1 Answers1