Unable to to perform the datatransfer.getData() on Drag and Drop of Illustrator object

Question

I am building a web tool that lets the user to drag and drop images from different sources. I am able to drag and drop objects from file systems and browsers but I am not able to do that with the objects in adobe illustrator.

    @HostListener('drop', ['$event']) public onDrop(event) {
      event.preventDefault();
      event.stopPropagation();
      event.dragstart = true;
      let dataTransfer = event.dataTransfer;
      let types: string = dataTransfer.types;
      console.log(types);
      let transfer: any;
      if (types.indexOf("Files")>-1)
        this.handleFiles(dataTransfer.files);
      else{
        console.log("elsewhere")
        transfer = dataTransfer.getData(types);
      }
    }

    handleFiles(files) {

      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;
        if (!file.type.match(imageType)) { continue; }
        var img = <HTMLElement>document.getElementById("imagePlaceholder");
        // img.file = file;
        var reader = new FileReader();
        reader.onload = function (event: any) {
          img.setAttribute('src', event.target.result);
        };
        reader.readAsDataURL(file);
      }
    }

The html:

<div class="dropzone" imageDnD (drop)=handleDrop($event)></div>

The file type in the event is com.adobe.cep.dnd.pasteboardtype. When I read the fileType I get the below information.

"{"assetList":[{"data":[""],"type":"image"},{"data":[""],"type":"text"}],"source":"com.adobe.illustrator","version":"23.0"}"

While we should be recieving some SVGs or an image.