Question

Why is nothing happening here when I drag a file over the imageContainer div? Nothing in the console, nothing on the page, etc.

<div id="imageContainer" style="height: 724px; width: 100%; "></div>

...

$('#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.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);
        });
    }
});

Answer 1

When you run it on Firefox with Firebug is says:

e.dataTransfer is undefined

So you would like to change it with:

e.originalEvent.dataTransfer

Here is the example