event.dataTransfer.files is empty when ondrop is fired?

Also take a look at this bug/behavior: HTML5 drop event doesn't work unless dragover is handled

Basically, you need to handle hover/drag and specify a dropEffect

It's working fine, it's just a bug with the console.

function onDrop(event) {
    event.preventDefault();
    console.log(event.dataTransfer.files[0]);
}