JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div class="choose_file" id="imageUploadForm">
        <span  >Photo</span>
        <input name="Select File" class="upload" type="file" />        
    </div>
<button id="btn_del" class="btn_del">Delete</button>

CSS

.choose_file{
    position:relative;
    display:inline-block;    
    border:#ebebeb solid 1px;
    width:150px;
    height:150px;
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
	background:#f2f2f2;
}
.btn_del{
    width:80px;
    height:30px;
    background-color:darkGrey !important;
    border:none;
}
 input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:10px;}

JavaScript

$(function () {
$("#btn_del").hide();
$("#imageUploadForm").on("change", function()
    {
        var files = !!this.files ? this.files : [];
    	var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg)$/;
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support
 
        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file
 
            reader.onloadend = function(){ // set image data as background of div
                $("#imageUploadForm").css("background-image", "url("+this.result+")");
            }
        }
    });
});