JSFiddle - React, Tailwind, and code Playground

HTML

<input type='file' id="upload" onchange="readURL(this)" />
    <img id="img" src="#" alt="your image" />

JavaScript

$(function(){
  $('#upload').change(function(){
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();

        reader.onload = function (e) {
           $('#img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }
    else
    {
      $('#img').attr('src', '/assets/no_preview.png');
    }
  });

});