JSFiddle - React, Tailwind, and code Playground

HTML

<input id="file" type='file' style=""/>
            <div align="center" style="margin-top:10px;">
                <img id="r" src="#" alt="your image" />
             
            </div>

JavaScript

jQuery(document).ready(function() {

        jQuery(function () {
                jQuery(":file").change(function () {
                    if (this.files && this.files[0]) {
                        var reader = new FileReader();
                        reader.onload = imageIsLoaded;
                        reader.readAsDataURL(this.files[0]);

                        
                    }
                });
            });

            function imageIsLoaded(e) {
                jQuery("#download").removeAttr("style");
                jQuery("#file").css("display", "none");
               
                
                //returns image object
                var imageHolder=jQuery('#r').get(0);
                
                //assign onload callback
                imageHolder.onload=function(){
                    var init_width = $('#r').width(); 
                    var init_height = $('#r').height();
                    alert('width :'+ init_width +' height :  '+ init_height);
                }
                
                imageHolder.src=e.target.result;
                
                
               // jQuery('#r').attr('src', e.target.result);
                jQuery('#download').attr('href', e.target.result);
                //var init_width = $('#r').width(); 
                //var init_height = $('#r').height();
               // alert('width :'+ init_width +' height :  '+ init_height);
            };

            

    });