JSFiddle - React, Tailwind, and code Playground

by KJ

HTML

<input type="file" name="myimage" id="myimage">
<img id="preview" alt="View Image" width="250px" height="250px"/>

CSS

<style>
    img{
        border: 1px solid #000; 
        padding: 2px;
        border-radius: 5px;
        background: #FFF;
    }
</style>

JavaScript

$("#myimage").change(function() {
        if (this.files && this.files[0]) {            
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        }
});