2

I am using a directive to get the files when it is dropped on the HTML element, it is working fine in chrome but it is not working in IE11. enter image description here the following is the code for the drag and drop event import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDropDirective {

  constructor() { }
  @Output()
  FileDragEvent: EventEmitter<File> = new EventEmitter<File>();

  @HostListener('window:drop', ['$event']) public onDrop(event) {

    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer.items[0].type != 'application/vnd.ms-excel') {
      return false;
    }
    let files = event.dataTransfer.files;
    this.FileDragEvent.emit(files);
  }
  @HostListener('window:dragover', ['$event']) public onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();

  }

  @HostListener('window:dragleave', ['$event']) public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();

  }
}

intially i was just using like this for the @hostlistener

@HostListener('dragover',

but then i read in some blog which asked me to change it to like this

@HostListener('window:dragover',

I also tried to give min-height to element which has the directive for drag and drop but still i am facing the issue.

the functionality is running smooth in chrome but i am facing issue in IE11

Lijin Durairaj
  • 3,341
  • 11
  • 31
  • 50

1 Answers1

0

removed from some styles pointer-events: none for IE 11 and everything seems to work

mivanyna
  • 1