Upload and show protected images in Froala

Question

I am using Froala in Angular and trying to insert images that are protected by the Bearer token.

I am able to upload images successfully and return the image URL.

Also, just for testing purposes, if I fetch the image, it seems to be loaded correctly. You can see the fetch method in the 'image.uploaded' event.

But, after uploading, I receive an error: {code: 1, message: 'Image cannot be loaded from the passed link.'}

So, the question is, how to insert an authorization-protected image in the Froala editor?

Code:

    <div [froalaEditor]="froalaEditorOptions" [(froalaModel)]="text">
    </div>

public froalaEditorOptions(token: string): object {
    const options: object = {
      key: environment.keys.froalaKey,

      imageUploadURL: 'http://localhost:5010/upload-image',
      imageUploadMethod: 'POST',
      imageMaxSize: 5 * 1024 * 1024,
      imageAllowedTypes: ['jpeg', 'jpg', 'png'],

      ...

      requestHeaders: {
        Authorization: 'Bearer ' + token
      },

      events: {
        'image.uploaded': function (e, editor, response) {
            console.log('image.uploaded');
            editor = this;
            const imageObject = JSON.parse(e);
  
            const headers = new Headers();
            headers.set('Authorization', `Bearer ${token}`);
  
            fetch(imageObject.link, { headers }).then(image => {
              editor.image.insert(image, null, null, null, e);
            });

          ...
        }
    }

    return options;
}

Answer 1

Unfortunately this is not possible. The reason being it's the browser which makes the image request once you've uploaded the image, and there is no way to intercept that request and stuff your bearer token in.

If you are storing your images in cloud like in an Azure storage container, you can use SAS Uri method here to temporarily return a public URL to the editor so the image gets displayed properly. But then, every time you load the HTML to the editor, you'll have to 'rewrite' those SAS Uris yourself.