JSFiddle - React, Tailwind, and code Playground

HTML

<img class="preview_img"></img>
<input id="file" name="myfile[]" type="file">

CSS

.preview_img{
    width:500px;
    min-height:100px;
    margin: auto;
    border: 1px solid blue;
}

JavaScript

$.fn.previewImg=function($on){
    var input = this;
    
    try{
        if (this.is("input[type='file']")) {
            
            input.change(function(){
                var reader = new FileReader();
                console.log("Input changed");
                reader.onloadend = function(){
                    console.log("onloadend triggered");
                    for (var i = 0; i < $on.length; i++) {
                        if (/img/i.test($on[i].tagName)) $on[i].src = reader.result;
                        else $on[i].style.bakgroundImage = "url("+reader.result+")";
                    }
                };
            });
        }else throw new exception("Trying to preview image from an element that is not a file input!");
    }catch(x){
        console.log(x);
    }
};

$("#file").previewImg($(".preview_img"));