JSFiddle - React, Tailwind, and code Playground

by cahnory

HTML

<div class="holder">dz</div>

CSS

.holder {
    border: 4px dashed #CCC;
    padding: 1em;

    &.\--hover {
        border-color: #BDB;
    }
}

JavaScript

$('.holder')
    .on('dragenter dragover', function (event) {
       $(this).addClass('--hover');
        event.preventDefault();
    })
    .on('dragend dragleave drop', function () {
       $(this).removeClass('--hover');
    })
    .on('drop', function (event) {
        var
            files,
            image;

        event.preventDefault();

        files = Array.prototype.slice.call(event.originalEvent.dataTransfer.files);
        files.every(function (file) {
            // keep first found image
            if (file.type.match(/image\/(jpeg|gif|png|svg)/)) {
                image = file;
                return false;
            }
            return true;
        });

        if (image) {
            console.log('image of type `' + image.type + '` found');
        } else {
            console.log('image not found');
        }
    });