Событие drop не срабатывает на внешнем div - PullRequest
Новая
       7

Событие drop не срабатывает на внешнем div

0 голосов
/ 01 августа 2020

Я написал код, который отвечает за перетаскивание файла изображения, чтобы загрузить его в хранилище firebase. Проблема в том, что событие запускается только тогда, когда я перетаскиваю файл на элемент ввода, а не на внешний div.

HTML: 

<div #dropZoneID class="dropzone"
dropzone
(hovered)="toggleHover($event)"
(dropped)="startUpload($event.target.files)"

style="text-align: center;">

    <h3>Haim Drop Zone</h3>
    <p>Drag and Drop a File</p>
    <div class="file">
      <label class="file-label">

      <input #fileInputID type="file" (change)="startUpload($event.target.files)">

      <span class="file-cta">
        <span class="file-icon">
          <i class="fa fa-upload"></i>
        </span>
        <span class="file-label">
           or choose a file
         </span>
      </span>
    </label>
  </div>
</div>

Angular Директива: 

@Output() dropped = new EventEmitter<FileList>();
@Output() hovered = new EventEmitter<boolean>();

constructor() { }

@HostListener('drop',['$event'])
  onDrop($event){
  $event.preventDeafult(); //make browser not to open a new tab
  this.dropped.emit($event.dataTransfer.files);
  this.hovered.emit(false);
}

@HostListener('dragover',['$event'])
  onDragOver($event){
  $event.preventDeafult(); //make browser not to open a new tab
  this.hovered.emit(true);
}

Изображение (демонстрация проблемы): введите описание изображения здесь

...