JSFiddle - React, Tailwind, and code Playground

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);
    var blob = _e.dataTransfer.files[0];
    var reader = new FileReader();
    reader.onload = function(event)
    {
        console.log(event.target.result)
    }; // data url  
    reader.readAsDataURL(blob); 
    console.log("(defined correctly in all browsers, including Firefox)");
}, false);