Angular text editor upload images request is not sending the Authorization header (JWT token )

Question

i have a problem using the text editor when i try to upload an image to the server im using jwt token... it works in all services but only when i use the upload image of the text editor he sends a POST request but without the Authorization header https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/ I have made already an JwtInterceptor and set (clone) the Authorization header to the request

i tried to add the token as a param in the url but that's not good ! i tried also to add headers to the image settings but no luck also !

this.params.append('Authorization', `Bearer ${this.token}`);
    this.urlSettings = {
      type: 'post',
      url : this.url+'upload/saveFile',
      headers: this.params
    };
    this.imageSettings = {
      saveUrl: this.urlSettings,
      path: this.imageUrl
    };

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        const token = JSON.parse(localStorage.getItem('token'));

        if (token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        }

        return next.handle(request);
    }
}

...

<ejs-richtexteditor [insertImageSettings]='imageSettings' [toolbarSettings]='tools'  required formControlName="content_en" ></ejs-richtexteditor>

...

Answer 1

You need to use the uploading event of the uploader control in the RTE and set the headers there to send additional headers with the image upload. To access the instance of the uploader control, bind the toolbarClick event and check the insert image tool and then bind the uploading event using the instance. Refer to the code below

[html]

    <ejs-richtexteditor #imageRTE id='imageRTE' [(quickToolbarSettings)]='toolbarSettings'  (toolbarClick)='onToolbarClick($event)'>

[ts]

    public onToolbarClick(e: any): void {
      if (e.item != null && e.item.id == "imageRTE_toolbar_Image") { // Checked if image toolbar is clicked 
        let element: any = document.getElementById('imageRTE_upload') // Image uploader element 
        element.ej2_instances[0].uploading = function upload(args) { // Added updating event on image uploader 
          args.currentRequest.setRequestHeader('Authorization', "Bearer ${token}"); // Setting additional headers
        }
      }
    }