How to store link of image uploaded to S3 from froala editor

Question

I uploaded image to S3 from froala editor(Angular io), now i want to store that link in a variable. how I can do that ? Below is how i tried

export class WriterComponent implements OnInit {
   imageLink:string;
   constructor() { }
   ngOnInit() {
     this._usersService.getS3Hash().subscribe(resp=>{
        this.options['imageUploadToS3'] = resp;
     });
   }

   public options:Object={
     heightMin:300,
     events:{
        'froalaEditor.image.uploadedToS3': function (e,editor,link,key,response) {
         // save the link
         this.imageLink=link;
   }
}

froala editor in HTML file

    <textarea [froalaEditor]="options" ngModel name="inputcontent"></textarea>

but after uploading the image when i display the imageLink it showing null.

It seems to be contex issue as imageLink is using froala editor contex instead of component.

Answer 1

Not sure about your configuration for this editor but may be these changes works for you

export class WriterComponent implements OnInit {
   imageLink:string;
   constructor() { }
   ngOnInit() {
     this._usersService.getS3Hash().subscribe(resp=>{
        // this.options['imageUploadToS3'] = resp; // you are assigning your response to `imageUploadToS3` which doesn't exist on options object. so changes it as
        this.options.events['imageUploadToS3'] = resp;
     });
   }

   public options:Object={
     heightMin:300,
     events:{
        'imageUploadToS3': (e,editor,link,key,response) => {    //Second change your function with arrow function here
         // save the link
         this.imageLink=link;
   }
}

If still error is there let me know, better is if you update your question with some working link like plunker or stackblitz