How can i make an avatar chooser with Material UI

Question

I'm using Material UI v3 within a react project (react v15.6).

What i did so far?

In the sign up page i can get an image from the user to use as his/her profile photo.

What i want to do

I would like to have a shade on the avatar photo to show him that is clickable. like this image...

avatarChooserImage

Someone can tell me, how can i do such a thing? I have no clue. I tried to use plain CSS, but much effort for nothing.

Answer 1

You can do something simple like this,

<IconButton>
 <Avatar 
  src="/images/example.jpg" 
  style={{
    margin: "10px",
    width: "60px",
    height: "60px",
  }} 
 />
</IconButton>

Which allow you to have a clickable avatar.

But since you are using it as file input too, maybe you can do something like this,

<input
 accept="image/*"
 className={classes.input}
 id="contained-button-file"
 multiple
 type="file"
/>
<label htmlFor="contained-button-file">
  <IconButton>
   <Avatar 
     src="/images/example.jpg" 
     style={{
      margin: "10px",
      width: "60px",
      height: "60px",
     }} 
    />
  </IconButton>
</label>

To do an overlay for "edit", have a look at css image overlay. This explains how to place a layer on top on Avatar Icon, it should answer you question.

P.S Accept this as the right answer if it answers your question, thank you.