JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thumbnail"></div>
<input type="file" id="upload-file" accept="image/*" />

JavaScript

$('body').on("click", ".imgKLIK5", function () {

        var self = $(this);

        $(self).remove();
        $('#upload-file').val("");
    });

    jQuery(function ($) {
        var fileDiv = document.getElementById("upload");
        var fileInput = document.getElementById("upload-file");

        fileInput.addEventListener("change", function (e) {

            var filesVAR = this.files;

            showThumbnail(filesVAR);

        }, false);



        function showThumbnail(files) {
            var file = files[0]

            var image = document.createElement("img");
            var thumbnail = document.getElementById("thumbnail");
            image.file = file;

            image.setAttribute('class', 'imgKLIK5');
            thumbnail.appendChild(image)

            var reader = new FileReader()
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            }(image))
            var ret = reader.readAsDataURL(file);
            var canvas = document.createElement("canvas");
            ctx = canvas.getContext("2d");
            image.onload = function () {
                ctx.drawImage(image, 100, 100);
            }
        }
    });