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.

by EDWIN MAURICIO QUISHPE MALDONADO

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);