Не удается прочитать перетаскивание файла с помощью FileReader

Я пытаюсь разрешить загрузку изображения на мой сайт с помощью перетаскивания на мой сайт путем перетаскивания изображения на определенный div на странице:

<div class = "container" (drop) = "onDrop($event)" (dragover) = "onDragOver($event)" (dragleave) = "onDragLeave($event)">
    <img id = "blah" [src] = "url || 'http://placehold.it/180'" alt = "your image" />

</div>

У меня есть все события, связанные с перетаскиванием, однако я не смог получить изображение из FileReader:

Что я делаю неправильно? мои функции, связанные с падением с контроллера, приведены ниже для справки.

onDrop(event) {
    event.preventDefault();
    event.stopPropagation();
    this.file = event.dataTransfer.files[0];
    const reader = new FileReader();
    reader.onload = e => {
        this.url = reader.result;
        console.info(this.url);
    };
    reader.readAsDataURL(this.file);
    this.fileDraggedOverDiv = false;
}

onDragOver(event) {
    event.stopPropagation();
    event.preventDefault();
    this.fileDraggedOverDiv = true;
    return false;
}

onDragLeave(event) {
    event.stopPropagation();
    event.preventDefault();
    this.fileDraggedOverDiv = false;
    return false;
}