JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" action="upload.php" method="post" enctype="multipart/form-data">
    <div><img alt="" id="image_preview" src="https://lh6.googleusercontent.com/-L17_eJqIsDI/UzbeiYk96RI/AAAAAAAASP4/SbOqhSuEyU4/s100-no/image-is-not-uploaded.jpg"/></div>
    <div><input type="file" id="image" name="image"/></div>
    <div>
        <input type="reset" value="Reset"/>
        <input type="submit" value="Upload..."/>
    </div>
</form>

CSS

#image_preview {
    border: 0;
    width: 100px;
    height: 100px;
}

JavaScript

$('#image').change(function() {
    var input = $(this)[0];
    if ( input.files && input.files[0] ) {
        if ( input.files[0].type.match('image.*') ) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#image_preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        } else console.log('is not image mime type');
    } else console.log('not isset files data or files API not supordet');
});
$('#form').bind('reset', function() {
    $('#image_preview').attr('src', 'https://lh6.googleusercontent.com/-L17_eJqIsDI/UzbeiYk96RI/AAAAAAAASP4/SbOqhSuEyU4/s100-no/image-is-not-uploaded.jpg');
});