3

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.

g14u
  • 248
  • 1
  • 2
  • 11
  • See: https://stackoverflow.com/a/54043619 – phoenix Aug 19 '21 at 17:43
  • Does this answer your question? [How to enable file upload on React's Material UI simple input?](https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input) – James Mitofsky May 02 '23 at 08:21

1 Answers1

7

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>
Viet Dinh
  • 1,871
  • 1
  • 6
  • 18