JSFiddle - React, Tailwind, and code Playground

by stecb

HTML

<div class="file-upload-img">
    <input id="file-up" type="file" />
    <img id="img-up" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/mountain-goat_635_600x450.jpg" />
</div>

CSS

.file-upload-img{
    width:200px;
    height:100px;
}
.file-upload-img img{
    width:100%;
    height:100%;
    cursor:pointer;
}
input[type="file"]{
    display:block;
    position:absolute;
    z-index:-1;
    opacity:0;
    filter:alpha(opacity=0);

}

JavaScript

$('#img-up').click(function(){
    $('#file-up').click();
})