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" />  
        <label id="error"></label>
    </div>
<button id="btn_del" class="btn_del">Delete</button>

CSS

#error{
    color:red;
}
.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;
 }


#imageUploadForm
{
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

JavaScript

$(function () {
$("#btn_del").hide();
$(".upload").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 (regex.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file
 			
            $("#btn_del").show();
            
             $("#btn_del").on("click", function()
             {
				$("#imageUploadForm").css("background-image", "none");
                 $("#btn_del").css("display", "none");
             });
            
            reader.onload = function(){ // set image data as background of div
                $("#imageUploadForm").css("background-image", "url("+this.result+")");
            }
        } else {
        	alert('Wrong file type!');
        }
    });
    
    
});