JSFiddle - React, Tailwind, and code Playground

by ITT Viet Nam

HTML

<input id="input" type="file" value="" />
<div id="preview"></div>

CSS

.thumb {
	width:40px;
    height: 40px;
    margin: 0.2em -0.7em 0 0;
}

JavaScript

$(document).ready(function()
{
    var previewImage;
    previewImage = function(input)
    {
        var reader;
        if (input.files && input.files[0])
        {
            reader = new FileReader();
            reader.onload = function(e)
            {
                $("#preview").html("<img class='thumb' src='" + e.target.result + "' />");
            };
            reader.readAsDataURL(input.files[0]);
        }
    };
    
    $("#input").on("change", function()
    {
        return previewImage(this);
    });
    
    $("preview").on("click", "#preview img", function()
    {
        if (confirm("Are you sure you want to remove this image?"))
        {
            $(this).remove();
            $("#input").val("");
        }
    });
});