Vanilla JS Drop Event does not fire

Question

I use the following code to find the reason why the drop event is not firing on a div:

let dropArea = document.getElementById('filedroparea-el');

document.addEventListener('drop', function (e) { e.preventDefault(); }, false);

dropArea.addEventListener('dragenter', function (e) { e.preventDefault(); console.log('dragenter prevented') }, false)
dropArea.addEventListener('dragstart', function (e) { e.preventDefault(); console.log('dragstart prevented') }, false)
dropArea.addEventListener('dragend', function (e) { e.preventDefault(); console.log('dragend prevented') }, false)
dropArea.addEventListener('dragover', function (e) { e.preventDefault(); console.log('dragover prevented') }, false)
dropArea.addEventListener('dragleave', function (e) { e.preventDefault(); console.log('dragleave prevented') }, false)
dropArea.addEventListener('drag', function (e) { e.preventDefault(); console.log('drag prevented') }, false)

dropArea.addEventListener('drop', handleDrop, false)    

function handleDrop(e) {

    console.log('droppend');
}

However, when I drop a pdf file on the filedroparea-el div, the pdf is shown in a new browser tab.

The console shows the following

dragenter prevented
dragover prevented
dragover prevented
dragleave prevented

How can I find the source for this behaviour?