CODEWITHSUNDEEP
angularckeditorimage-upload
Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17570

Angular CKEditor Image Upload

Hello In angular app I am using CKEditor. For image upload I use code below

Demo

 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;
    }
  
  }

in component

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

in html

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

I take error below

TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Where is my missing ?

Thanks in advance

Thanks to @Chellappan வ for his suggestion. It solved error. But Image is disappear after a second ago.

Upvotes: 0

Views: 857

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27303

file : Promise.<(File | null)>

As mentioned in the documentation file return type is Promise so we have resolve before assigning the file to readAsDataURL.

Try this:

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

Upvotes: 1

Related Questions