JSFiddle - React, Tailwind, and code Playground

by Vikash Verma

HTML

<input type="file" ><br>

    <div id="preview"></div>

JavaScript

$(function(){
    $('input[type=file]').change(previewFile);
   
    
 function previewFile() {
     var el=$('#preview');
  var preview = $(document.createElement('img'))[0];
     preview.height=200;
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
     var imgdiv=$(document.createElement('div')).append(preview).append('<span>x</span>');
      $(imgdiv).find('span').click(function(){
       $(this).parent().remove();
    });
     el.append(imgdiv);
}

});