JSFiddle - React, Tailwind, and code Playground

HTML

<input id='upload' type='file' accept="image/*"/>
<div id="image_container"></div>

CSS

#image_container{
    width: 800px;
    height: 200px;
    background-color: #ccc;
}

JavaScript

$("#upload").change(function(){
	if(this.files && this.files[0]){
		if(this.files[0].type == "image/jpeg" || this.files[0].type == "image/png" || this.files[0].type == "image/gif"){
			var reader = new FileReader();
				reader.readAsDataURL(this.files[0]);
				reader.onload = function(e){
					imageObj = new Image();
					imageObj.src = e.target.result;
					var image_orginal_width = imageObj.width;
					var image_width = $('#image_container').width();
					var image_height = Math.round(imageObj.height*image_width/image_orginal_width);
                    
                    $('#image_container').css({
						'background': 'url('+e.target.result+')',
						'background-size': image_width+'px '+image_height+'px',
						'height': image_height
					});
				}
			}else{
				alert("Only images allowed");
			}
		}
	});