JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<input id="picture" type="file" accept="image/gif, image/jpeg, image/jpg, image/png" hidden>
	<label for="picture">Choose file</label>
</div>
<div class="preview">
</div>

CSS

body {
    margin: 20px;
    width: 600px;
}

label[for=picture] {
    float: left;
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    background: crimson;
    color: white;
    padding: 10px 0 10px 0;
    width: 100%;
}

.preview {
    float: left;
    width: 100%;
    height: 500px;
    background: gray;
    margin-top: 10px;
}

JavaScript

$(function() {
	var _image;

	$('input[type=file]').on('change', _selectorChangeHandler);

	function _selectorChangeHandler( event ) {
		var file = event.target.files[0],
			reader = new FileReader();

		reader.onload = _readerLoadHandler;
		reader.readAsDataURL(file);
	};

	function _readerLoadHandler( event ) {
		var data = event.target.result;

		_image = new Image();
		_image.src = data;
		_image.onload = _imageLoadHandler;
	};

	function _imageLoadHandler() {
		var preview = $('.preview');

		preview.css('background', 'url('+_image.src+') no-repeat');
		preview.css('background-size', 'cover');
	};
});