Can't add an image on v2.0.0

[PierreDugue]

Angular v13 angular-editor v2.0.0

When trying to add an image, an error occurs when selecting it:

ERROR TypeError: response.body is undefined

[mobychan]

I get this as well, even though the upload works and the image is displayed. According to DevTools the body is fine:

[cristian-perez-tt]

I´m having the same issue with 1.2.0v, I think it is because que response is sending updated info as it uploads the img, so it has no body body.imageUrl yet.

My fix workaround is to check before using spread operator: and inside onFileChanged():

[simbapy]

I´m having the same issue with 1.2.0v, I think it is because que response is sending updated info as it uploads the img, so it has no body body.imageUrl yet.

My fix workaround is to check before using spread operator: and inside onFileChanged():

@cristian-perez-tt Where did you find the code you modified? I can't seem to locate it.

[cristian-perez-tt]

In my case is node_modules@kolkov\angular-editor_ivy_ngcc_\fesm2015\kolkov-angular-editor.js you could search inside @kolkov folder "watchuploadimage" and check matches due you are changing a library file, its a bad fix that works only for you, till a new release can be done.

[simbapy]

watchuploadimage

Thanks @cristian-perez-tt . It worked. Any idea on how to maintain these changes when you push to the server and it rebuilds there?

[cristian-perez-tt]

I´ve seen few things but I didn´t try any. I think the easiest one is to make a new branch from kolkov git, and use that custom version inside package.json https://www.quora.com/How-do-you-change-the-code-of-a-node-module

[mkajander]

The easiest way at least for me is npm i patch-package Modify library code in node_modules/@kolkov/angular-editor/esm2015/lib/angular-editor-toolbar.component.js and/or @kolkov/angular-editor/fesm2015/kolkov-angular-editor.js npx patch-package @kolkov/angular-editor

Add patch-package into package.json "scripts": {

• "postinstall": "patch-package" }

Now npm install should automatically patch the package with changes https://www.npmjs.com/package/patch-package

I'm using v1.2 and had the same issue

[BelvedereHenrique]

The problem happens because the code tries do deconstruct response.body. If your object doesn't have a "body" property, it will crash.

In my case, my API returns an simple object like this:

{
"imageUrl": "routeToImage";
}

If you create a custom function to upload your files and pipe the Observable response, changing it to a object like this:

{
    "body":
    {
        "imageUrl": "routeToImage";
    }
}

it will work

In my case:

  uploadImage = (file: File): Observable<HttpEvent<UploadResponse>> => {
    let route = this.apiRoute + '/uploadImage';
    const formData = new FormData();
    formData.append('file', file, file.name);
    return this.httpClient
      .post<HttpEvent<UploadResponse>>(route, formData)
      .pipe(
        map((x: any) => {
          x.body = {imageUrl:this.apiRoute + '/image/' + x.imageUrl};
          return x;
        })
      );
  };

Then, on the editor config object:

    toolbarHiddenButtons: [['backgroundColor', 'insertVideo', 'toggleEditorMode']],
    upload: this.service.uploadImage,

No need to change the lib code and recompile it everytime.

[DorinelSenilong]

@kolkov Hello I am using your package and I experienced the same issue with the others. It seems you need to update the package for the handling of response.body when uploading image