File drop upload dataTransfer is empty Angular 2

Question

I'am trying to create simple drag-n-drop file upload process. But actually I can't get dataTransfer from event.

Files list is always empty. Could someone help me, please? I don't know what exactly I'm doing wrong. Thanks so much for any help.

Here is Plunker example.

P.S. Sorry, please, I can't post normal link view because there is tip about: link should be a code.

[Demo][1]

[1]: https://plnkr.co/edit/tfRHBg7P6QUGDHqWp2TL?p=preview

P.S. Update. I found an interesting thing. In direct dataTransfer I can see that files list is empty. But when I tried to iterate it...it works. I can see my file. How it can be explained? I upade my planker so you can check it. It is very strange.

public t_fileDrop(e): void {


e.stopPropagation(); // Stops some browsers from redirecting.
    e.preventDefault();
    console.log("DROP =>", e);
    console.log("e.dataTransfer =>", e.dataTransfer);

    console.log(e.dataTransfer.getData("image/jpeg"));

    var files = e.dataTransfer.files;
    for (var i = 0, f; f = files[i]; i++) {
      console.log(f); // Here I can see my dropped file! :)
    }
   }

Answer 1

easy solution in Angular is to copy array by spread operator.

onDrop(event) {
    const files = [...event.dataTransfer.files];
    console.log(files);
    if (files.length > 0) {
      this.fileDropped.emit(files);
    }
}