Capture result of HTML5 FileReader when using promises in async





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







6















I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?



ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});

image.src = base64; // how to get base64 string into image.src var here??

let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
}

/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}

public processImage() {

}









share|improve this question




















  • 2





    Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

    – sloth
    Nov 16 '18 at 12:56






  • 1





    Move it to promise.then or use async await? What's the problem on +400???

    – yurzui
    Nov 16 '18 at 13:07













  • So you want to use promise but don't want to wait for that to be fulfilled.

    – zaheer
    Nov 16 '18 at 13:21


















6















I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?



ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});

image.src = base64; // how to get base64 string into image.src var here??

let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
}

/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}

public processImage() {

}









share|improve this question




















  • 2





    Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

    – sloth
    Nov 16 '18 at 12:56






  • 1





    Move it to promise.then or use async await? What's the problem on +400???

    – yurzui
    Nov 16 '18 at 13:07













  • So you want to use promise but don't want to wait for that to be fulfilled.

    – zaheer
    Nov 16 '18 at 13:21














6












6








6








I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?



ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});

image.src = base64; // how to get base64 string into image.src var here??

let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
}

/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}

public processImage() {

}









share|improve this question
















I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?



ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});

image.src = base64; // how to get base64 string into image.src var here??

let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
}

/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}

public processImage() {

}






angular html5 typescript es6-promise photoeditorsdk






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 16 '18 at 13:01







Zabs

















asked Nov 8 '18 at 15:35









ZabsZabs

5,64438128221




5,64438128221








  • 2





    Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

    – sloth
    Nov 16 '18 at 12:56






  • 1





    Move it to promise.then or use async await? What's the problem on +400???

    – yurzui
    Nov 16 '18 at 13:07













  • So you want to use promise but don't want to wait for that to be fulfilled.

    – zaheer
    Nov 16 '18 at 13:21














  • 2





    Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

    – sloth
    Nov 16 '18 at 12:56






  • 1





    Move it to promise.then or use async await? What's the problem on +400???

    – yurzui
    Nov 16 '18 at 13:07













  • So you want to use promise but don't want to wait for that to be fulfilled.

    – zaheer
    Nov 16 '18 at 13:21








2




2





Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

– sloth
Nov 16 '18 at 12:56





Why don't you just put let image = new Image(); and image.src = base64; inside the promise callback function?

– sloth
Nov 16 '18 at 12:56




1




1





Move it to promise.then or use async await? What's the problem on +400???

– yurzui
Nov 16 '18 at 13:07







Move it to promise.then or use async await? What's the problem on +400???

– yurzui
Nov 16 '18 at 13:07















So you want to use promise but don't want to wait for that to be fulfilled.

– zaheer
Nov 16 '18 at 13:21





So you want to use promise but don't want to wait for that to be fulfilled.

– zaheer
Nov 16 '18 at 13:21












3 Answers
3






active

oldest

votes


















3





+400









As the code is asynchronous in nature, you will have to wait for the result if you want to use it. In your case, you will have to wait until your promise is resolved. So your code should look like:



ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(this.fileObject, this.processImage);
promise.then(function(base64: string) {
console.log(base64);
image.src = base64;

let editor = new PhotoEditorSDK.UI.ReactUI({
container: this.editor.nativeElement
editor: {
image: image
}
});
});
}


I have changed following things:




  1. I moved code for ReactUI instantiation inside promise callback

  2. Specified type of base64 parameter as string

  3. Fixed typo in getBase64 function call, from this.processImage() to this.processImage so it is passing callback function and not result of processImage function.


I hope this helps!






share|improve this answer

































    6














    Since getBase64 is an async operation you can't use it's result right away. You need to wait for it either by calling then (as you have already experimented with) or using async/await.



    The async/await version (which is also part of the es 2017 standard) is simpler to understand especially if you are new to async programming. A general rule of thumb, if you see a Promise and need to use the value you will need to use the await operator (and make your method async)



    async ngAfterViewInit() {
    let image = new Image();
    var base64 = await this.getBase64(fileObject, this.processImage());

    image.src = base64; //Now available

    let editor = new PhotoEditorSDK.UI.ReactUI({
    container: this.editor.nativeElement
    editor: {
    image: image
    }
    });
    }
    public getBase64(file, onLoadCallback) {
    return new Promise<string>(function(resolve, reject) {
    var reader = new FileReader();
    reader.onload = function() { resolve(reader.result as string); };
    reader.onerror = reject;
    reader.readAsDataURL(file);
    });
    }


    You can also move your code to the callback passed to a then call, but this may be a bit harder to read (especially if you are just starting out with async code) and if you have to orchestrate multiple async operations reading the code quickly becomes an issue



    async ngAfterViewInit() {
    let image = new Image();
    this.getBase64(fileObject, this.processImage())
    .then(base64=>
    {
    image.src = base64; // available now

    let editor = new PhotoEditorSDK.UI.ReactUI({
    container: this.editor.nativeElement
    editor: { image }
    });
    });
    }





    share|improve this answer

































      3














      promise.then is an async function which means the code comes after this statement will be executed first and then callback function within then will be executed. So, you should move your code into callback of then.





      promise.then((base64: string) => {
      console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
      console.log(typeof base64); // type is string
      image.src = base64;

      let editor = new PhotoEditorSDK.UI.ReactUI({
      container: this.editor.nativeElement
      editor: {
      image: image
      }
      });
      });


      Edit: I changed the callback function to fat arrow function () => {}, it's because you are accessing one of the component fields by this.editor, and functions have their own scope. You may get an error saying cannot read nativeElement of undefined.






      share|improve this answer


























      • Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

        – Zabs
        Nov 16 '18 at 14:54








      • 1





        You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

        – Bunyamin Coskuner
        Nov 16 '18 at 14:59












      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53211073%2fcapture-result-of-html5-filereader-when-using-promises-in-async%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      3





      +400









      As the code is asynchronous in nature, you will have to wait for the result if you want to use it. In your case, you will have to wait until your promise is resolved. So your code should look like:



      ngAfterViewInit(): void {
      let image = new Image();
      var promise = this.getBase64(this.fileObject, this.processImage);
      promise.then(function(base64: string) {
      console.log(base64);
      image.src = base64;

      let editor = new PhotoEditorSDK.UI.ReactUI({
      container: this.editor.nativeElement
      editor: {
      image: image
      }
      });
      });
      }


      I have changed following things:




      1. I moved code for ReactUI instantiation inside promise callback

      2. Specified type of base64 parameter as string

      3. Fixed typo in getBase64 function call, from this.processImage() to this.processImage so it is passing callback function and not result of processImage function.


      I hope this helps!






      share|improve this answer






























        3





        +400









        As the code is asynchronous in nature, you will have to wait for the result if you want to use it. In your case, you will have to wait until your promise is resolved. So your code should look like:



        ngAfterViewInit(): void {
        let image = new Image();
        var promise = this.getBase64(this.fileObject, this.processImage);
        promise.then(function(base64: string) {
        console.log(base64);
        image.src = base64;

        let editor = new PhotoEditorSDK.UI.ReactUI({
        container: this.editor.nativeElement
        editor: {
        image: image
        }
        });
        });
        }


        I have changed following things:




        1. I moved code for ReactUI instantiation inside promise callback

        2. Specified type of base64 parameter as string

        3. Fixed typo in getBase64 function call, from this.processImage() to this.processImage so it is passing callback function and not result of processImage function.


        I hope this helps!






        share|improve this answer




























          3





          +400







          3





          +400



          3




          +400





          As the code is asynchronous in nature, you will have to wait for the result if you want to use it. In your case, you will have to wait until your promise is resolved. So your code should look like:



          ngAfterViewInit(): void {
          let image = new Image();
          var promise = this.getBase64(this.fileObject, this.processImage);
          promise.then(function(base64: string) {
          console.log(base64);
          image.src = base64;

          let editor = new PhotoEditorSDK.UI.ReactUI({
          container: this.editor.nativeElement
          editor: {
          image: image
          }
          });
          });
          }


          I have changed following things:




          1. I moved code for ReactUI instantiation inside promise callback

          2. Specified type of base64 parameter as string

          3. Fixed typo in getBase64 function call, from this.processImage() to this.processImage so it is passing callback function and not result of processImage function.


          I hope this helps!






          share|improve this answer















          As the code is asynchronous in nature, you will have to wait for the result if you want to use it. In your case, you will have to wait until your promise is resolved. So your code should look like:



          ngAfterViewInit(): void {
          let image = new Image();
          var promise = this.getBase64(this.fileObject, this.processImage);
          promise.then(function(base64: string) {
          console.log(base64);
          image.src = base64;

          let editor = new PhotoEditorSDK.UI.ReactUI({
          container: this.editor.nativeElement
          editor: {
          image: image
          }
          });
          });
          }


          I have changed following things:




          1. I moved code for ReactUI instantiation inside promise callback

          2. Specified type of base64 parameter as string

          3. Fixed typo in getBase64 function call, from this.processImage() to this.processImage so it is passing callback function and not result of processImage function.


          I hope this helps!







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 19 '18 at 14:50

























          answered Nov 17 '18 at 9:39









          Dipen ShahDipen Shah

          7,23011531




          7,23011531

























              6














              Since getBase64 is an async operation you can't use it's result right away. You need to wait for it either by calling then (as you have already experimented with) or using async/await.



              The async/await version (which is also part of the es 2017 standard) is simpler to understand especially if you are new to async programming. A general rule of thumb, if you see a Promise and need to use the value you will need to use the await operator (and make your method async)



              async ngAfterViewInit() {
              let image = new Image();
              var base64 = await this.getBase64(fileObject, this.processImage());

              image.src = base64; //Now available

              let editor = new PhotoEditorSDK.UI.ReactUI({
              container: this.editor.nativeElement
              editor: {
              image: image
              }
              });
              }
              public getBase64(file, onLoadCallback) {
              return new Promise<string>(function(resolve, reject) {
              var reader = new FileReader();
              reader.onload = function() { resolve(reader.result as string); };
              reader.onerror = reject;
              reader.readAsDataURL(file);
              });
              }


              You can also move your code to the callback passed to a then call, but this may be a bit harder to read (especially if you are just starting out with async code) and if you have to orchestrate multiple async operations reading the code quickly becomes an issue



              async ngAfterViewInit() {
              let image = new Image();
              this.getBase64(fileObject, this.processImage())
              .then(base64=>
              {
              image.src = base64; // available now

              let editor = new PhotoEditorSDK.UI.ReactUI({
              container: this.editor.nativeElement
              editor: { image }
              });
              });
              }





              share|improve this answer






























                6














                Since getBase64 is an async operation you can't use it's result right away. You need to wait for it either by calling then (as you have already experimented with) or using async/await.



                The async/await version (which is also part of the es 2017 standard) is simpler to understand especially if you are new to async programming. A general rule of thumb, if you see a Promise and need to use the value you will need to use the await operator (and make your method async)



                async ngAfterViewInit() {
                let image = new Image();
                var base64 = await this.getBase64(fileObject, this.processImage());

                image.src = base64; //Now available

                let editor = new PhotoEditorSDK.UI.ReactUI({
                container: this.editor.nativeElement
                editor: {
                image: image
                }
                });
                }
                public getBase64(file, onLoadCallback) {
                return new Promise<string>(function(resolve, reject) {
                var reader = new FileReader();
                reader.onload = function() { resolve(reader.result as string); };
                reader.onerror = reject;
                reader.readAsDataURL(file);
                });
                }


                You can also move your code to the callback passed to a then call, but this may be a bit harder to read (especially if you are just starting out with async code) and if you have to orchestrate multiple async operations reading the code quickly becomes an issue



                async ngAfterViewInit() {
                let image = new Image();
                this.getBase64(fileObject, this.processImage())
                .then(base64=>
                {
                image.src = base64; // available now

                let editor = new PhotoEditorSDK.UI.ReactUI({
                container: this.editor.nativeElement
                editor: { image }
                });
                });
                }





                share|improve this answer




























                  6












                  6








                  6







                  Since getBase64 is an async operation you can't use it's result right away. You need to wait for it either by calling then (as you have already experimented with) or using async/await.



                  The async/await version (which is also part of the es 2017 standard) is simpler to understand especially if you are new to async programming. A general rule of thumb, if you see a Promise and need to use the value you will need to use the await operator (and make your method async)



                  async ngAfterViewInit() {
                  let image = new Image();
                  var base64 = await this.getBase64(fileObject, this.processImage());

                  image.src = base64; //Now available

                  let editor = new PhotoEditorSDK.UI.ReactUI({
                  container: this.editor.nativeElement
                  editor: {
                  image: image
                  }
                  });
                  }
                  public getBase64(file, onLoadCallback) {
                  return new Promise<string>(function(resolve, reject) {
                  var reader = new FileReader();
                  reader.onload = function() { resolve(reader.result as string); };
                  reader.onerror = reject;
                  reader.readAsDataURL(file);
                  });
                  }


                  You can also move your code to the callback passed to a then call, but this may be a bit harder to read (especially if you are just starting out with async code) and if you have to orchestrate multiple async operations reading the code quickly becomes an issue



                  async ngAfterViewInit() {
                  let image = new Image();
                  this.getBase64(fileObject, this.processImage())
                  .then(base64=>
                  {
                  image.src = base64; // available now

                  let editor = new PhotoEditorSDK.UI.ReactUI({
                  container: this.editor.nativeElement
                  editor: { image }
                  });
                  });
                  }





                  share|improve this answer















                  Since getBase64 is an async operation you can't use it's result right away. You need to wait for it either by calling then (as you have already experimented with) or using async/await.



                  The async/await version (which is also part of the es 2017 standard) is simpler to understand especially if you are new to async programming. A general rule of thumb, if you see a Promise and need to use the value you will need to use the await operator (and make your method async)



                  async ngAfterViewInit() {
                  let image = new Image();
                  var base64 = await this.getBase64(fileObject, this.processImage());

                  image.src = base64; //Now available

                  let editor = new PhotoEditorSDK.UI.ReactUI({
                  container: this.editor.nativeElement
                  editor: {
                  image: image
                  }
                  });
                  }
                  public getBase64(file, onLoadCallback) {
                  return new Promise<string>(function(resolve, reject) {
                  var reader = new FileReader();
                  reader.onload = function() { resolve(reader.result as string); };
                  reader.onerror = reject;
                  reader.readAsDataURL(file);
                  });
                  }


                  You can also move your code to the callback passed to a then call, but this may be a bit harder to read (especially if you are just starting out with async code) and if you have to orchestrate multiple async operations reading the code quickly becomes an issue



                  async ngAfterViewInit() {
                  let image = new Image();
                  this.getBase64(fileObject, this.processImage())
                  .then(base64=>
                  {
                  image.src = base64; // available now

                  let editor = new PhotoEditorSDK.UI.ReactUI({
                  container: this.editor.nativeElement
                  editor: { image }
                  });
                  });
                  }






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 19 '18 at 12:18

























                  answered Nov 18 '18 at 1:33









                  Titian Cernicova-DragomirTitian Cernicova-Dragomir

                  73.3k35370




                  73.3k35370























                      3














                      promise.then is an async function which means the code comes after this statement will be executed first and then callback function within then will be executed. So, you should move your code into callback of then.





                      promise.then((base64: string) => {
                      console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
                      console.log(typeof base64); // type is string
                      image.src = base64;

                      let editor = new PhotoEditorSDK.UI.ReactUI({
                      container: this.editor.nativeElement
                      editor: {
                      image: image
                      }
                      });
                      });


                      Edit: I changed the callback function to fat arrow function () => {}, it's because you are accessing one of the component fields by this.editor, and functions have their own scope. You may get an error saying cannot read nativeElement of undefined.






                      share|improve this answer


























                      • Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                        – Zabs
                        Nov 16 '18 at 14:54








                      • 1





                        You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                        – Bunyamin Coskuner
                        Nov 16 '18 at 14:59
















                      3














                      promise.then is an async function which means the code comes after this statement will be executed first and then callback function within then will be executed. So, you should move your code into callback of then.





                      promise.then((base64: string) => {
                      console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
                      console.log(typeof base64); // type is string
                      image.src = base64;

                      let editor = new PhotoEditorSDK.UI.ReactUI({
                      container: this.editor.nativeElement
                      editor: {
                      image: image
                      }
                      });
                      });


                      Edit: I changed the callback function to fat arrow function () => {}, it's because you are accessing one of the component fields by this.editor, and functions have their own scope. You may get an error saying cannot read nativeElement of undefined.






                      share|improve this answer


























                      • Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                        – Zabs
                        Nov 16 '18 at 14:54








                      • 1





                        You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                        – Bunyamin Coskuner
                        Nov 16 '18 at 14:59














                      3












                      3








                      3







                      promise.then is an async function which means the code comes after this statement will be executed first and then callback function within then will be executed. So, you should move your code into callback of then.





                      promise.then((base64: string) => {
                      console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
                      console.log(typeof base64); // type is string
                      image.src = base64;

                      let editor = new PhotoEditorSDK.UI.ReactUI({
                      container: this.editor.nativeElement
                      editor: {
                      image: image
                      }
                      });
                      });


                      Edit: I changed the callback function to fat arrow function () => {}, it's because you are accessing one of the component fields by this.editor, and functions have their own scope. You may get an error saying cannot read nativeElement of undefined.






                      share|improve this answer















                      promise.then is an async function which means the code comes after this statement will be executed first and then callback function within then will be executed. So, you should move your code into callback of then.





                      promise.then((base64: string) => {
                      console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
                      console.log(typeof base64); // type is string
                      image.src = base64;

                      let editor = new PhotoEditorSDK.UI.ReactUI({
                      container: this.editor.nativeElement
                      editor: {
                      image: image
                      }
                      });
                      });


                      Edit: I changed the callback function to fat arrow function () => {}, it's because you are accessing one of the component fields by this.editor, and functions have their own scope. You may get an error saying cannot read nativeElement of undefined.







                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Nov 16 '18 at 15:51

























                      answered Nov 16 '18 at 13:07









                      Bunyamin CoskunerBunyamin Coskuner

                      4,15011136




                      4,15011136













                      • Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                        – Zabs
                        Nov 16 '18 at 14:54








                      • 1





                        You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                        – Bunyamin Coskuner
                        Nov 16 '18 at 14:59



















                      • Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                        – Zabs
                        Nov 16 '18 at 14:54








                      • 1





                        You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                        – Bunyamin Coskuner
                        Nov 16 '18 at 14:59

















                      Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                      – Zabs
                      Nov 16 '18 at 14:54







                      Seems to work however I am getting a Type '{}' is not assignable to type 'string' even though am certain that the base64 variable is a string. I have also declared the image as any e.g public image: any - any reason why I am getting typescript error within my editor? (although it seems to run...)

                      – Zabs
                      Nov 16 '18 at 14:54






                      1




                      1





                      You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                      – Bunyamin Coskuner
                      Nov 16 '18 at 14:59





                      You can define base64 explicitly string since you know it’ll be a string during runtime. So try function(base64: string)

                      – Bunyamin Coskuner
                      Nov 16 '18 at 14:59


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53211073%2fcapture-result-of-html5-filereader-when-using-promises-in-async%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      Florida Star v. B. J. F.

                      Danny Elfman

                      Retrieve a Users Dashboard in Tumblr with R and TumblR. Oauth Issues