JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="file-upload">
<img class="profile-pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
<div class="upload-button">Upload Image</div>
<input class="file-upload" type="file" accept="image/*"/>
</div>

CSS

#file-upload {position: relative; width: 200px; height: 200px;}
.upload-button {position:absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;line-height: 200px;}
.profile-pic {width: 100%;}
.file-upload {display: none;}

JavaScript

$(document).ready(function() {
   var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            } 
            reader.readAsDataURL(input.files[0]);
        }
    }    
    $(".file-upload").on('change', function(){
        readURL(this);
    });
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});