JSFiddle - React, Tailwind, and code Playground

HTML

<form action="post">
    <input id="file" name="file" type="file" multiple/>
    <br/>
    <button name="submit" value="submit">submit</button>
</form>
<div id="preview"></div>

CSS

.thumb {
    width: 50px;
    height: 50px;
    margin: 0.2em -0.7em 0 0;
}
.remove_img_preview {
    position:relative;
    top:-25px;
    right:5px;
    background:black;
    color:white;
    border-radius:50px;
    font-size:0.9em;
    padding: 0 0.3em 0;
    text-align:center;
    cursor:pointer;
}
.remove_img_preview:before {
    content:"Ă—";
}

JavaScript

console.log('x')
function handleFileSelect(event) {
    var input = this;
    console.log(input.files)
    if (input.files && input.files.length) {
        var reader = new FileReader();
        this.enabled = false
        reader.onload = (function (e) {
        console.log(e)
            $("#preview").html(['<img class="thumb" src="', e.target.result, '" title="', escape(e.name), '"/><span class="remove_img_preview"></span>'].join(''))
        });
        reader.readAsDataURL(input.files[0]);
    }
}
$('#file').change(handleFileSelect);
$('#preview').on('click', '.remove_img_preview', function () {
    $("#preview").empty()
    $("#file").val("");
});
$("form").submit(function () {
    $.each(this.elements, function () {
        console.log(this, $(this).val())
    })
    return false
})