JSFiddle - React, Tailwind, and code Playground

by hammerbrostime

HTML

<div id="imageContainer" style="height: 124px; width: 100%; background-color: green"></div>

JavaScript

$('#imageContainer').on({
    dragenter: function dragEnter() {
        console.log('enter');
        $(this).css('background-color', 'lightBlue');
    },
    dragleave: function dragLeave() {
        console.log('leave');
        $(this).css('background-color', 'white');
    },
    dragover: false,
    drop: function dragDrop (e) {
        console.log('drop');
        jQuery.each(e.originalEvent.dataTransfer.files, function (index, file) {
            var fileReader = new FileReader();
            fileReader.onload = (function (file) {
                return function (e) {
                    $(this).append('<div class="dataurl"><strong>' + file.fileName + '</strong>' + e.target.result + '</div>');
                };
            })(file);
            fileReader.readAsDataURL(file);
        });
    }
});