JSFiddle - React, Tailwind, and code Playground

HTML

<label for="icon_upload">Image:<br>
    <div class="icon_wrapper"><div id="preview_1"></div></div>
</label>
<input type="file" preview-target-id="preview_1">

CSS

.icon_wrapper {
    height: 256px; width: 256px;
    background-color: #fefefe;
    border: dashed 1px #ccc;
}
.icon_wrapper div {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%; width: 100%;
}

JavaScript

$('input[type="file"][preview-target-id]').on('change', function() {
    var input = $(this)
    if (!window.FileReader) return false // check for browser support
    if (input[0].files && input[0].files[0]) {
        var reader = new FileReader()
        reader.onload = function (e) {
            var target = $('#' + input.attr('preview-target-id'))
            var background_image = 'url(' + e.target.result + ')'
            target.css('background-image', background_image)
            target.parent().show()
        }
        reader.readAsDataURL(input[0].files[0]);
    }
})