JSFiddle - React, Tailwind, and code Playground

by Dan0

HTML

<div id="drop-zone">Drop on me</div>

JavaScript

function preventDefault(_e) {
    _e.preventDefault();
}

var dropZone = document.getElementById('drop-zone');
dropZone.addEventListener("dragstart", preventDefault, false);
dropZone.addEventListener("dragleave", preventDefault, false);
dropZone.addEventListener("drag", preventDefault, false);
dropZone.addEventListener("dragend", preventDefault, false);
dropZone.addEventListener("dragover", preventDefault, false);
dropZone.addEventListener("dragenter", function (_e) {
    _e.preventDefault();
    console.log(_e.dataTransfer.files);
    console.log("(only ever null in Firefox)");
}, false);
dropZone.addEventListener("drop", function (_e) {
    _e.preventDefault();
    console.log(_e.dataTransfer.files);
    console.log("(defined correctly in all browsers, including Firefox)");
}, false);