Upload adapter is not defined Issue with Image uploading in ckeditor5-angular

Question

This question may have already answers but none of them is Angular specific. Here are some of them

• CKEditor 5 and Image Button
• How to enable image upload support in CKEditor 5?
• Insert image to CKeditor

I am using Angular 5 and following this documentation to implement ckeditor5-angular.

But I am having issue with image uploading, when I try uploading image it says in the browser console.

filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

I have tried searching for this issue and was able to find a lot of solutions, but literally I couldn't understand a single of them because they were not Angular specific.

Please help how can I upload image.

Answer 1

In component.html file add following code

<ckeditor [editor]="Editor" (ready)="onReady($event)"></ckeditor>

in component.ts file create function onReady(data)

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

Add new class called UploadAdapter and add following code:-

export class UploadAdapter {
  private loader;
  constructor(loader: any) {
    this.loader = loader;
    console.log(this.readThis(loader.file));
  }

  public upload(): Promise<any> {
    //"data:image/png;base64,"+ btoa(binaryString) 
    return this.readThis(this.loader.file);
  }

  readThis(file: File): Promise<any> {
    console.log(file)
    let imagePromise: Promise<any> = new Promise((resolve, reject) => {
      var myReader: FileReader = new FileReader();
      myReader.onloadend = (e) => {
        let image = myReader.result;
        console.log(image);
        return { default: "data:image/png;base64," + image };
        resolve();
      }
      myReader.readAsDataURL(file);
    });
    return imagePromise;
  }

}

here default indicate uploaded image url. I have converted file in base64 but you can call server url and upload your file then return server url with same key.

EnjOy CodInG :)