Angular 8 Drag Drop Dragover Dragleave события не стреляют

Question

Я пытаюсь осуществить загрузку файлов с помощью перетаскивания в angular 8, вдохновленный этой статьей и этой .

I не могу получить любое из событий перетаскивания, чтобы выстрелить. Я проверил, что DragDropDirective импортируется с помощью методов mouseenter в той же директиве, которые запускаются правильно, я также вижу, что добавленный мною стиль применяется правильно.

Я бился по своему Поговорите с этим весь день, что я пропускаю?

Редактировать: это работает с файлами из Проводника, но не с файлами с рабочего стола. Использование Ubuntu 19.

// component.html
<section appDragDrop class="panel" id="dropzone-wrapper" (onFileDropped)="uploadFile($event)">
    <input type="file" #fileInput (change)="uploadFile($event.target.files)" accept=".json" hidden>
    <label for="dropzone">
        <span>
            drag and drop here.
        </span>
    </label>
</section>

import { Directive, Output, Input, EventEmitter, HostBinding, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDropDirective {
  el: ElementRef
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }

  // Working fine
  @HostListener('mouseenter') onMouseEnter() {
    console.log('mouse entering')
  }

  // Working fine
  @HostListener('mouseleave') onMouseLeave() {
    console.log('mouse leaving')
  }

  // --- Not working ---
  @HostListener('dragover', ['$event']) onDragOver(evt) {
    console.log('A')
  }

  // --- Not working ---
  @HostListener('dragleave', ['$event']) public onDragLeave(evt) {
    console.log('B')
  }

  // --- Not working ---
  @HostListener('drop', ['$event']) public ondrop(evt) {
    console.log('C')
  }
}

Answer 1

Код, который вы указали, работает нормально: https://stackblitz.com/edit/angular-ayht81?embed=1&file=src / app / drag-drop.directive.ts

Событие сброса

Сброс не сработает, если вы не запретите поведение по умолчанию в течение:

@HostListener("dragover", ["$event"]) onDragOver(evt) {
  evt.preventDefault()
  console.log("A");
}

Подтверждение работы: