JSFiddle - React, Tailwind, and code Playground

by Abdulla Nilam

HTML

<div style="width:350px;">
    <form id="form1" enctype="multipart/form-data">
        <input onchange="readURL(this);" type="file" />
        <img alt="Image Display Here" id="test" src="#" height="100px" width="100px" />
    </form>
</div>

CSS

#test { display:none; }

JavaScript

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#test').attr('src', e.target.result);
                //$("#test").css("display", "block");
                $('#test').css({"display":"block","float":"right" });

            }
            reader.readAsDataURL(input.files[0]);
        }
    }