Angular Загрузка изображения CKEditor

Question

Hello In angular app Я использую CKEditor. Для загрузки изображения я использую код ниже

Демо

 export class UploadAdapter {
    private loader;
    constructor(loader: any) {
      this.loader = loader;
    }
  
    public upload(): Promise<any> {
      return this.readThis(this.loader.file);
    }
  
    readThis(file: any): Promise<any> {
      console.log(file)
      let imagePromise: Promise<any> = new Promise((resolve, reject) => {
        var myReader: FileReader = new FileReader();
        myReader.onloadend = (e) => {
          console.log("girdi");
          let image = myReader.result;
          console.log(image);
          resolve({ default: "data:image/png;base64," + image });
        }
        myReader.readAsDataURL(file);
      });
      return imagePromise;
    }
  
  }

в компоненте

 onReady(eventData) {
    eventData.plugins.get('FileRepository').createUploadAdapter = function (loader) {
      console.log(btoa(loader.file));
      return new UploadAdapter(loader);
    };
  }

в html

<ckeditor [editor]="Editor"(ready)="onReady($event)" data="<p>Hello, world!</p>"></ckeditor>

Я принимаю ошибку ниже

TypeError: не удалось выполнить readAsDataURL в FileReader: параметр 1 не относится к типу Blob.

Где мое пропавшее?

Заранее спасибо

Спасибо @Chellappan வ за его предложение. Это решило ошибку. Но изображение исчезает через секунду a go.

Answer 1

file : Promise.<(File | null)>

Как упоминалось в документации тип файла возвращаемого значения - Promise, поэтому мы должны решить, прежде чем присвоить файл readAsDataURL.

Попробуйте следующее:

 public async upload(): Promise<any> {
      const file = await this.loader.file;
      return this.readThis(file);
    }