JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" name="image">
    
<img id="image" src="" width="300" style="display:none">
    
    <div id="console-log"></div>

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

var showImage = function(event) {
        var files = event.target.files || event.originalEvent.dataTransfer.files || null;
    
        var FR= new FileReader();
        FR.onload = function(e) {
             $('#image').attr("src", e.target.result).show();
        };       
        FR.readAsDataURL(files[0]);
    };

$(document).on('change', 'input:file', function(event) {
    showImage(event);
});