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.
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>