Click an image to upload file in ReactJS

Question

I am making a react app where I need to click an image which will serve the purpose of a button to upload a file. I can not figure out how to use an image as an input button.

@StudioTime . That doesnt refer to the question, as this question is about a submit button (Which needs a form) — Flex Elektro Deimling
– Flex Elektro Deimling, Commented Nov 23, 2021 at 11:58

Flex Elektro Deimling · Accepted Answer · 2021-11-23 11:55:54Z

4

Probably the easiest way would be to use a wrapper element and pure css for that. just put an image where the text is now.

.wrapper{
  display:inline-block;
  position:relative
}

.btnimg{
  background:red;
  pointer-events:none;
  width:250px;
  height:90px;
  opacity:1;
  line-height:90px;
  text-align:center;
}

input[type=file]{
  opacity:0;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

<div class="wrapper">
<div class="btnimg">btn with image</div>
<input type="file">
</div>

answered Nov 23, 2021 at 11:55

Flex Elektro Deimling

1,6091 gold badge18 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Click an image to upload file in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related