JSFiddle - React, Tailwind, and code Playground

by Yogesh Gupta

HTML

<input type='file' id='input1'>
    <img id='imagepreview1'>

CSS

#imagepreview1{
    
    height:100px;
    width:100px;
}

JavaScript

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imagepreview1').prop('src', e.target.result).show();
        }

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

$("#input1").change(function () {
    readURL(this);
    $('#imagepreview1').show();
});

$("#input1").click(function () {
    $(this).val('');
    $('#imagepreview1').prop('src', '');
});

$('#imagepreview1').click(function(){

    $('#input1').replaceWith($('#input1').clone(true));
    $('#imagepreview1').hide();

});