return function value with promise

Question

I have this function ror convert file to base64 for show file.

 ConvertFileToAddress(event): string {

    let localAddress: any;
    const reader = new FileReader();
    reader.readAsDataURL(event.target['files'][0]);
    reader.onload = (e) => {
        localAddress = e.target['result'];
    };
    return localAddress;
}

And use it not components like this:

this.coverSrc=this.localization.ConvertFileToAddress(event);

But when log to the console the this.coverSrc it shows me undefined.

When I log in this bracket:

    reader.onload = (e) => {
        localAddress = e.target['result'];
    };

It show the value of base64 but when I log the localAddress outside of bracket it shows me undefined.

DEMO

How can I return the value of function and use it in other components?

Allabakash · Accepted Answer · 2019-12-22 12:51:31Z

2

You can handle that either by Promises or callback.

-- Using Call backs

ConvertFileToAddress(event, callback): string {
    const reader = new FileReader();
    reader.readAsDataURL(event.target['files'][0]);
    reader.onload = callback;
}

this.localization.ConvertFileToAddress(event, (e) => {
     this.coverSrc = e.target['result'];
});

-- Using Promises

ConvertFileToAddress(event): string {

    return new Promise((resolve, reject) {

        const reader = new FileReader();
        reader.readAsDataURL(event.target['files'][0]);
        reader.onload = (e) => {
             resolve(e.target['result']);
        };
    });
}

this.localization.ConvertFileToAddress(event).then((data) => {

   this.coverSrc = data;
});

You can make of Observable as well - you check the sample here - https://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject

answered Dec 22, 2019 at 12:51

Allabakash

2,0371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Allabakash Over a year ago

can you create a stackblitz demo to reproduce the issue?

Collectives™ on Stack Overflow

return function value with promise

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related