File Drag & Drop not working in IE11 Javascript

Question

I am trying to create a custom directive in Angular 5 which can convert any div into a dropzone so that the user can drop a file from OS to a browser in order to upload it. The directive is working fine in chrome but it is not working in IE11. The problem which I am facing here is that the event.dataTransfer.files FileList object is coming as empty but in case of Chrome, the file is present in it. Following are the event handlers that I have applied till now

  @HostListener('drop', [ '$event' ])
  public onDrop(event: any): void {
    console.log('In On Drop Event');
    event.preventDefault();
    event.stopPropagation();
    console.log(event.dataTransfer.files, 'Files dropped in the drop zone');
  }

  @HostListener('dragover', [ '$event' ])
  public onDragOver(event: any): void {
    console.log('In On Drag Over Event');
    event.preventDefault();
    event.stopPropagation();
    event.dataTransfer.dropEffect = 'copy';
  } 

These are the only 2 drag events that I was able to work with because dragstart effect doesn't work for dragging files from OS and dropping them into the browser. Any suggestion would here as I have almost exhausted all my options.

Answer 1

From caniuse : https://caniuse.com/#feat=dragndrop

IE11 only has partial support for drag and drop

dataTransfer.items only supported by Chrome .

Currently no browser supports the dropzone attribute.

Firefox supports any kind of DOM elements for .setDragImage. Chrome must have either an HTMLImageElement or any kind of DOM Element attached to the DOM and within the viewport of the browser for .setDragImage.

1 Partial support refers to no support for the dataTransfer.files or .types objects

2 Partial support refers to not supporting .setDragImage

3 Partial support refers to limited supported formats for dataTransfer.setData/getData.

You might have to search for a polyfill or a fallback to upload files directly using file input instead of DnD