Blob to Base64 in javascript not returning anything from FileReader

Question

I am using FileReader in typescript to convert a blob to a base64 image that will then be displayed in the template of my application.

  adaptResultToBase64(res: Blob): string {
    let imageToDisplay : string | ArrayBuffer | null = '';

    const reader = new FileReader();

    reader.onloadend = function () {
      imageToDisplay = reader.result;
      return imageToDisplay;
    };

    reader.readAsDataURL(res);

    return imageToDisplay;
  }

Whilst the data logged inside the read.onloadend function displays the base64 string I cannot pass it out of the function.

I have tried adding a callback but where it is called elsewhere doesn't return anything but an empty string.

Does this answer your question? (rhetorical) How do I return the response from an asynchronous call? — Lawrence Cherone
– Lawrence Cherone, Commented Jan 24, 2023 at 17:28
A very good explanation of all things async, but it turns out poor explanations and documentation on the specific thing I needed was more my issue! — OHello
– OHello, Commented Jan 25, 2023 at 15:45

Dilshod Fayzullayev · Accepted Answer · 2023-01-25 12:53:39Z

2

Please check this code

<input type="file" id="file">
<button id="click">click</button>

let data: string | ArrayBuffer;

document.getElementById('file').onchange = function (e: Event) {
  let files: FileList | null = (<HTMLInputElement>e.target).files;

  let reader: FileReader = new FileReader();
  reader.onload = function (e: ProgressEvent<FileReader>) {
    console.log(e.target.result);
    data = e.target.result;
  };
  if (files.length > 0) {
    reader.readAsDataURL(files?.[0]);
  }
};

document.getElementById('click').onclick = function () {
  console.log(data); // result if present otherwise null is returned
};

Using a separate method view. The `return` value is a `Promise`.

function adaptResultToBase64(res: Blob): Promise<string> {
    let reader: FileReader = new FileReader();

    return new Promise((resolve, reject) => {
        reader.onloadend = () => {
            resolve(reader.result as string);
        }
        reader.onerror = () => {
            reject("Error reading file.");
        }
        reader.readAsDataURL(res);
    })
}

To get the result

adaptResultToBase64(/* Blob value */)
    .then(resp => console.log(resp))
    .catch(error => console.log(error));

See here for specifics on `Promise`

MDN
learn.javascript.ru

edited Jan 25, 2023 at 12:53

answered Jan 24, 2023 at 19:01

Dilshod Fayzullayev

985 bronze badges

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

2 Comments

OHello Over a year ago

This is good, but I'm not calling the function in the DOM. I'm getting the base64 from another file and using it elsewhere.

Dilshod Fayzullayev Over a year ago

Well, I think I understand you. Look here

OHello · Accepted Answer · 2023-01-25 16:18:41Z

The basic result I needed and did not realise that the reader.onload is actually a callback for read.readAsDataUrl and finishes everything inside it async.

adaptResultToBase64(res:Blob){

    const reader = new FileReader();

    reader.onload = function () {
      
    // Was missing code here that needed to be called asynchronously. 
    
    adapterToNewObject(reader.result.toString())

    };

    reader.readAsDataURL(res);

  }
}

I was performing this in Angular so for anyone else who runs into this problem here it is using Angular syntax:

In your class:

export class Component {

adaptedResult:Result


 getBase64() {
    this.http.get().subscribe((result: Blob) => {

        const reader = new FileReader();

        reader.onload = () => { 

          this.adaptedResult =  this.adapter(reader.result) // Assign or use  reader.result value, this is an example of using an adapter function.
        };
    
        reader.readAsDataURL(result);
      });
  }



 adapter(base64:string){
  return {
   name:'image',
   image:base64'
   }
 }

}

Collectives™ on Stack Overflow

Blob to Base64 in javascript not returning anything from FileReader

2 Answers 2

Please check this code

Using a separate method view. The `return` value is a `Promise`.

To get the result

See here for specifics on `Promise`

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Please check this code

Using a separate method view. The return value is a Promise.

To get the result

See here for specifics on Promise

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Using a separate method view. The `return` value is a `Promise`.

See here for specifics on `Promise`