Is it possible to somehow use pipes in kendo-editor in Angular?

Question

Is it possible to somehow use pipes in kendo-editor in Angular?

My use case is the following. I have implemented the image uploading from local machine to my own endpoint (as described here ) . Also, I have implemented a get endpoint which returns the image. So, I can use the links to retrieve images by the src image attribute. But I need user to be authenticated to call the get endpoint.

My research on the question: How to intercept the src http request and set headers for it? led me to a solution with the secure pipe, which would run the request for me. Eg this article describes the solution.

I was able to implement the solution. So, now when in my Angular template I have:

<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />

The image is loaded through the endpoint, because I am able to use authentication (because I run the http request explicitly instead of delegating that to browser).

So, now it would be really very very great if I were able to somehow add the code

<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />

into the kendo editor value and actually see an image. But I can not figure out how can I use pipes inside the kendo editor`s value.

For the authentication I am using a header with a bearer token.

So, could someone suggest me an idea how I can use pipes inside the kendo editor?

The option to preload images and store them in the src of the kendo editor`s value as the base64 is not appropriate for me, because in my kendo editor`s values there might me a lot of images, and I store the value as a string in database. So, if I use the base64 I may run out of space quickly (because, I will store all the images in the text).

UPDATE

Here is my attempt to use a directive. As one can see the class for the directive gets added to an image, but the alert message does not fire.

Directive:

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '.customDownload',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    
    alert("code reached");
  }
}

Verification that the class was added to an image:

Here is the kendo-editor component api.

The directive itself works fine. If we add the <img class="customDownload" /> into the template of app.component, then the code in directive will get reached and an alert will fire.

Answer 1

You can use a directive, but the image will be uploaded twice, once natively and once via httpClient:

import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: 'img[src]',
})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,
    private http: HttpClient,
  ) {
    this.el.nativeElement.style.display = 'none';

    const url = this.el.nativeElement.src;

    this.loadImage(url).subscribe(src => {
      this.el.nativeElement.src = src;
      this.el.nativeElement.style.display = 'block';
    });
  }
  private loadImage(url: string): Observable<string> {
    return this.http
      // load the image as a blob
      .get(url, { responseType: 'blob' }).pipe(
        // create an object url of that blob that we can use in the src attribute
        map(e => URL.createObjectURL(e)),
      );
  }
}

after update: you can change the uploadImage() function to upload it via httpClient

public uploadImage(): void {
  const { src } = this.imageInfo;

  this.http
  // load the image as a blob
  .get(src, { responseType: 'blob' }).pipe(
    // create an object url of that blob that we can use in the src attribute
    map(e => URL.createObjectURL(e)),
  ).subscribe(() => {
    // Invoking the insertImage command of the Editor.
    this.editor.exec('insertImage', this.imageInfo);

    // Closing the Dialog.
    this.close();
  });
}