Image is not shown after uploading

[musaay]

We've configured uploadUrl and response contains "imageUrl".

Response: {..,"imageUrl":"https:/..",..}.

But there is no change or error.

[xela92]

I noticed that when using uploadUrl or upload, it uses internally watchUploadImage function, that expects the response to have a body property with the UploadResponse object; but it's not like that.

HttpEvent (aka HttpResponse) does not have body, so it should access response.imageUrl directly.

Since it tries to destructure imageUrl from response.body (undefined), it crashes.

I worked around this using the upload config parameter and wrapping the UploadResponse object in a body envelope.

Here's what I came out with:

my upload function:

public uploadImage(file: File) {
    const formData: FormData = new FormData();
    formData.append("file", file, file.name);
    return fromPromise(
      this.http.post(
        "/blabla", formData)
          .toPromise()
          .then(res => ({body: res}))) as Observable<HttpEvent<UploadResponse>>;
  }

in editorConfig:

{
    ...,
    upload: (file: File) => this.api.uploadImage(file),
}

of course any better solution is appreciated.

[musaay]

Hi @xela92 I tried as you said but there is no change. It still didnt work.

My conf:

editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    minHeight: '10rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    fonts: [
      {class: 'sans-serif', name: 'Inter'}
    ],
    defaultFontSize: '3',
    sanitize: false,
    upload: (file: File) => this.uploadImage(file),
  };

  private uploadImage(file: File){
    const formData: FormData = new FormData();
    formData.append("file", file, file.name);
    return fromPromise(
      this.mediaService.saveFile(formData, 'PUBLIC-CDN')
      .toPromise()
      .then(response => ({body: response?.imageUrl}))) as Observable<HttpEvent<UploadResponse>>;
  }

[xela92]

Hi @xela92 I tried as you said but there is no change. It still didnt work.

My conf:

editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    minHeight: '10rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    fonts: [
      {class: 'sans-serif', name: 'Inter'}
    ],
    defaultFontSize: '3',
    sanitize: false,
    upload: (file: File) => this.uploadImage(file),
  };

  private uploadImage(file: File){
    const formData: FormData = new FormData();
    formData.append("file", file, file.name);
    return fromPromise(
      this.mediaService.saveFile(formData, 'PUBLIC-CDN')
      .toPromise()
      .then(response => ({body: response?.imageUrl}))) as Observable<HttpEvent<UploadResponse>>;
  }

I don't know what mediaService.saveFile is doing, you should try debugging it. Maybe you need to add uploadWithCredentials: true to editorConfig in order to pass the authentication headers when the call is made? Then, is saveFile returning an Observable? What shape does the response have? If you make upload function return an Observable<HttpEvent<{body: UploadResponse}>> the editor should be able to subscribe itself and retrieve the data without crashing. Otherwise I suggest you to collect console errors and share them here, maybe it's a different issue. Also, for you to know, I'm using Angular 15 with latest angular-editor.