JSFiddle - React, Tailwind, and code Playground

by Swapnil Khamkar

HTML

<img id="test_image"...

CSS

#test_image{
 width: 100px;
  height: 100px;
-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
}

JavaScript

var prev_image;
$(document).ready(function(){
  $("input[type='file']").change(function(event){
     var tmppath = URL.createObjectURL(event.target.files[0]);
    //get the val of the previous image for the reset use later
    prev_image = $("#test_image").attr("src");
    //render the selected image on the image box (test_image)
    $("#test_image").attr("src", tmppath);
   })
});