JSFiddle - React, Tailwind, and code Playground

HTML

<div class="uploadbutton">
	
	<p class="textdiv"><img src="http://www.clker.com/cliparts/f/s/v/m/D/y/michelle-md.png">Add Images</p>
	<input id="btnupload" type="file" class="upload" />
</div>
<input id="fileupload" placeholder="0 files selected" disabled="disabled"  />
 <div class="imagediv"></div>

CSS

.uploadbutton {
    background-color: #bdbdbd;
    height: 158px;
    margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 199px;
}
.uploadbutton input.upload {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	height: 100%;
	text-align: center;
}
.custom-span{ font-family: Arial; font-weight: bold;font-size: 100px; color: #FE57A1}
#fileupload{border: none;margin-left: 10px; width: 200px;}
img {
    height: auto;
    max-height: 100%;
    width: 100%;
}

.textdiv {
    color: #585858;
    font-family: arial;
    font-size: 24px;
    font-weight: bold;
    height: 100%;
    width: 100%;
}
img{ height:auto ;width: 100% }

JavaScript

document.getElementById("btnupload").onchange = function () {
document.getElementById("fileupload").value = this.value;
};

$(function () {
  $(".upload").change(function () {
         
        $(".imagediv").show(); 
        $(".imagediv").append("<img />");
        var input = $(this);
        console.log(input[0].files);
        if (input[0].files && input[0].files[0]) {
      
            var reader = new FileReader();
            reader.onload = function (e) {   
                $(".imagediv img").attr('src', e.target.result);
            }
            reader.readAsDataURL(input[0].files[0]);
        }
    });
    
});