JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

Question

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

In my typescript application, I am utilizing the FileReader to convert a blob into a base64 image for display within the template.

  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;
  }

Even though the base64 string is correctly displayed inside the read.onloadend function, I encounter difficulty passing it out of the function scope.

I attempted using a callback but encountered issues where it returned an empty string when called elsewhere.

javascript typescript asynchronous base64 filereader

Answer 1

Answer №1

Kindly Review and Verify this Code Snippet

<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
};

Incorporating a Distinct Method for Viewing Results. The `return` Outcome is in the Form of a `Promise`.

function convertResultToBase64(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 Obtain the Final Output

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

For Detailed Information on `Promise`, Refer to:

MDN
learn.javascript.ru

Answer 2

Kindly Review and Verify this Code Snippet

<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
};

Incorporating a Distinct Method for Viewing Results. The `return` Outcome is in the Form of a `Promise`.

function convertResultToBase64(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 Obtain the Final Output

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

For Detailed Information on `Promise`, Refer to:

MDN
learn.javascript.ru

Answer 3

Answer №2

After encountering an issue, I discovered that the reader.onload function serves as a callback for read.readAsDataUrl and executes everything inside it asynchronously.

adaptResultToBase64(res:Blob){

    const reader = new FileReader();

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

    };

    reader.readAsDataURL(res);

  }
}

My experience involved working with Angular, so I am sharing my solution for anyone facing a similar problem 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'
   }
 }

}

Answer 4

After encountering an issue, I discovered that the reader.onload function serves as a callback for read.readAsDataUrl and executes everything inside it asynchronously.

adaptResultToBase64(res:Blob){

    const reader = new FileReader();

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

    };

    reader.readAsDataURL(res);

  }
}

My experience involved working with Angular, so I am sharing my solution for anyone facing a similar problem 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'
   }
 }

}

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

Answer №1

Kindly Review and Verify this Code Snippet

Incorporating a Distinct Method for Viewing Results. The `return` Outcome is in the Form of a `Promise`.

To Obtain the Final Output

For Detailed Information on `Promise`, Refer to:

Answer №2

Similar questions

Breaking apart field values in React Final Form

Guide to customizing the layout preview specifically for certain components in Storybook, without affecting all components

Is sending a stream to a variable the best option, or could there be another solution

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

Exploring Angular 6's nested routes and corresponding components for child navigation

What is the method for displaying html files in a POST request?

The fade-in effect will initiate from the start once the mouse leaves the element (with a

What is the best way to target changing elements displayed by *ngIf?

Accessing an object's property within a mapped array in a Next.js application is possible

An in-depth guide on incorporating an Editor into a Reactjs project

Modifying the content in one form field based on the information entered in another input field

Compare the precise value of $(window).height() to a specific scroll value

Is there a way to resize SVG images without having to modify the underlying source code?

Show a separate div in a block format if the data field contains a value

Typescript does not allow for extending an interface with a data property even if both interfaces have the same data type

What is the best way to pass an array of 8-digit strings from an input in Angular to a Node.js backend?

Sending a collection of nested arrays to an MVC controller

Retrieving outcomes from a sequence of callback functions in Node.Js

Guide to organizing an HTML table column with a header click using PHP and MySQL

Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

JavaScript's Blob to Base64 conversion using FileReader is failing to produce any output

Answer №1

Kindly Review and Verify this Code Snippet

Incorporating a Distinct Method for Viewing Results. The return Outcome is in the Form of a Promise.

To Obtain the Final Output

For Detailed Information on Promise, Refer to:

Answer №2

Similar questions

Breaking apart field values in React Final Form

Guide to customizing the layout preview specifically for certain components in Storybook, without affecting all components

Is sending a stream to a variable the best option, or could there be another solution

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

Exploring Angular 6's nested routes and corresponding components for child navigation

What is the method for displaying html files in a POST request?

The fade-in effect will initiate from the start once the mouse leaves the element (with a

What is the best way to target changing elements displayed by *ngIf?

Accessing an object's property within a mapped array in a Next.js application is possible

An in-depth guide on incorporating an Editor into a Reactjs project

Modifying the content in one form field based on the information entered in another input field

Compare the precise value of $(window).height() to a specific scroll value

Is there a way to resize SVG images without having to modify the underlying source code?

Show a separate div in a block format if the data field contains a value

Typescript does not allow for extending an interface with a data property even if both interfaces have the same data type

What is the best way to pass an array of 8-digit strings from an input in Angular to a Node.js backend?

Sending a collection of nested arrays to an MVC controller

Retrieving outcomes from a sequence of callback functions in Node.Js

Guide to organizing an HTML table column with a header click using PHP and MySQL

Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

Incorporating a Distinct Method for Viewing Results. The `return` Outcome is in the Form of a `Promise`.

For Detailed Information on `Promise`, Refer to: