0

I am trying to return image src base64 with a method to preview multiple images. I am using fileReader inside a promise. I am not returning any value in it. I am sending the value as a File object. my code is as below.

Template

 <div *ngFor="let file of filelist">
   <img [src]="readFile(file) | async">
 </div>

TS

async readFile(file: File) {
    return new Promise(done => {
        debugger
        const reader = new FileReader();
        reader.onload = () => {
             done(reader.result);
            };
        reader.readAsArrayBuffer(file);
    })
}

any help with this appreciated.

5
  • What doesn't work?
    – Bergi
    Jul 4, 2021 at 21:27
  • I doubt you can set the src property to an array buffer. Try using a data url instead.
    – Bergi
    Jul 4, 2021 at 21:28
  • @Bergi I tried data url as well it also doesn’t work. I believe the function should return base64 string. That’s what doesn’t work.
    – tyrantx3
    Jul 4, 2021 at 21:54
  • A data url is a base64 string, isn't it? Can you show us what you tried and maybe the output of logging the reader result?
    – Bergi
    Jul 4, 2021 at 22:37
  • Alternatively, this appears to be a much simpler solution
    – Bergi
    Jul 4, 2021 at 22:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.