JSFiddle - React, Tailwind, and code Playground

by Dmitry Maximov

HTML

<div class="download-image">
    <div class="output"></div>
    <input accept="image/*" id="file-1" type="file">
    <label for="file-1">Загрузи фото</label>
</div>

CSS

.download-image {}

label {
    display: inline-block;
    padding: 0;
    cursor: pointer;
}

input {
    display: none;
}

.output {
    position: relative;
    display: inline-block;
}

.output.full {}

.output ~ label {
    display: none;
}

.output-delete {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    font-size: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    cursor: pointer;
}

.output-delete:hover {
    background: rgba(0, 0, 0, 0.7);
}

.output-delete::before,
.output-delete::after {
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 3px;
    content: "";
    width: 1.6rem;
    height: .2rem;
    background: red
}

.output-delete::after {
    transform: rotate(-45deg);
}

.output-image {
    overflow: hidden;
    width: 100px;
}

.output-image img {
    display: block;
    max-width: 100%;
    border-radius: 8px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    var frameFile;
    var clearInputDownload = function () {
        frameFile.querySelector('.output-image').remove();
        frameFile.querySelector('.output').classList.remove('full');
        frameFile.querySelector('input').value = '';
    };
    var handleFileSelect = function (evt) {
        var file = evt.target.files; // FileList object
        frameFile = evt.target.parentNode;
        var f = file[0];
        // Only process image files.
        // if (!f.type.match('image.*')) {
        //     alert("Только изображения");
        // }
        var reader = new FileReader();
        // Closure to capture the file information.
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var div = document.createElement('div');
                div.classList.add('output-image');
                div.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" /><span class="output-delete" tabindex=0>delete</span>'].join('');
                frameFile.querySelector('.output').insertBefore(div, null);
                frameFile.querySelector('.output').classList.add('full');
                frameFile.querySelector('.output-delete').addEventListener('click', clearInputDownload, false);
            };
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    };
    var downloadImageBlocks = document.querySelectorAll('.download-image input');
    for (var i = 0; i < downloadImageBlocks.length; i++) {
        downloadImageBlocks[i].addEventListener('change', handleFileSelect, false);
    }
});