Determine whether or not a drag event contains file(s) before drop

For security reasons, events other than drop will show dataTransfer.files to be empty even if they do contain files.

HTML

Drag files here

JavaScript

function printEventDetails(event){
    event.preventDefault();
    
    document.body.innerHTML = ('type: ' + event.type + '<br/>contains files: ' + containsFiles(event));
}

function containsFiles(event){
    if (event.dataTransfer.types) {
        for (var i=0; i<event.dataTransfer.types.length; i++) {
            if (event.dataTransfer.types[i] == "Files") {
                return true;
            }
        }
    }
    
    return false;
}

document.addEventListener('dragenter', printEventDetails, false);

document.addEventListener('drop',      printEventDetails, false);

// Necessary to allow drop reception
document.addEventListener('dragover', function(dragover){
    dragover.preventDefault();
}, false);