Argthtjtr

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 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.