reactJS material UI Icon button to upload file

Question

I want to know how can I open the directory to upload a file using an IconButton?

<IconButton 
  iconClassName="fa fa-plus-square" 
  onClick={(e) => e.stopPropagation()} 
  type='file'
/>

using the code below shows the icon button and another button for the upload file

<IconButton iconClassName="fa fa-plus-square" onClick={(e) => e.stopPropagation()}>
    <input type="file type='file'>
</IconButton>

Answer 1

I think the standard way from material ui examples:

 <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
  <label htmlFor="icon-button-file">
    <IconButton color="primary" className={classes.button} component="span">
      <PhotoCamera />
    </IconButton>
  </label>

Answer 2

A few things:

1. You don't need type='file' on the IconButton, just on the input

2. IconButton does not expect its children to be anything other than an SVGIcon, so I recommend that you use a regular button

3. I wouldn't call stopPropagation in this case

4. You have a typo in your type prop for the input. You have type="file type='file'. It should just be type="file"

So, putting that all together:

<FlatButton label="Choose file" labelPosition="before">
  <input type="file" style={styles.exampleImageInput} />
</FlatButton>

If you still want it to be an icon rather than a button, I suspect you can do something with <input> or add it as the children to FlatButton with no label.