JSFiddle - React, Tailwind, and code Playground

by rudiedirkx

HTML

<div id=div></div>

CSS

#div {
    height: 200px;
    width: 200px;
    background: #ddd;
    margin: 20px;
}

JavaScript

var div = document.getElementById('div');
div.ondrop = function(e) {
    e.preventDefault();

    var files = e.dataTransfer.files;
console.log(files);
    for ( var i=0, L=files.length; i<L; i++ ) {
        var file = files[i];

        var filereader = new FileReader;
        filereader.onload = function(e) {
            var img = document.createElement('img');
            img.src = this.result;
            img.title = file.fileName;
console.log(img);
            document.body.appendChild(img);
        };

        filereader.readAsDataURL(file);
    }

    return false;
}