Can a blob file be transformed into base64Data using Javascript specifically in Ionic and Angular frameworks?

Question

Can a blob file be transformed into base64Data using Javascript specifically in Ionic and Angular frameworks?

https://i.stack.imgur.com/3aMyx.png[

async FileZip() {
    const code = await fetch("./assets/input.txt")
    var blob = await downloadZip([code]).blob()
     console.log(blob);

 
   function blobToBase64(blob: Blob): Observable<string> {
      return new Observable<string>(observer => {
          const reader = new FileReader();
         reader.onerror = observer.error;
          reader.onabort = observer.error;
          reader.onload = () =>                     observer.next(reader.result as string);
          reader.onloadend = observer.complete;


    FileSharer.share({
      filename: "input.zip",
      base64Data: //base64datawillbehere ,
      contentType: 'application/zip'
    });
    reader.readAsDataURL(blob);
  })

I am brand new to the world of Ionic and App Development. I've successfully compressed a text file into a zip blob file using client-zip library. After utilizing downloadZip(), I obtained a zip blob file similar to this example. Now, my goal is to share this file as a zip file using Capacitor Filesharer. However, it appears that in order to use this Filesharer plugin, I need to convert the blob zip file into base64 data. Could someone provide guidance on how to achieve this? Is it even possible? Please excuse any ignorance in my question, as I'm still learning the ropes of JavaScript.

javascript angular typescript ionic-framework blob

Answer 1

Answer №1

Here is a useful function that you should consider implementing:

function convertBlobToBase64(blob: Blob): Observable<string> {
    return new Observable<string>(observer => {
        const reader = new FileReader();
        reader.onerror = observer.error;
        reader.onabort = observer.error;
        reader.onload = () => observer.next(reader.result as string);
        reader.onloadend = observer.complete;
        reader.readAsDataURL(blob);
    })
}

Answer 2

Here is a useful function that you should consider implementing:

function convertBlobToBase64(blob: Blob): Observable<string> {
    return new Observable<string>(observer => {
        const reader = new FileReader();
        reader.onerror = observer.error;
        reader.onabort = observer.error;
        reader.onload = () => observer.next(reader.result as string);
        reader.onloadend = observer.complete;
        reader.readAsDataURL(blob);
    })
}

Answer 3

Answer №2

Consider making the following adjustments to your code: (keeping the previous answer unchanged could help others who want to utilize the Observable strategy, unlike your scenario where using Promise is recommended)

ngOnInit(): void {
  this.fileZip();
}

private blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onabort = reject;
    reader.onload = () => resolve(reader.result as string);
    reader.readAsDataURL(blob);
  })
}

private async fileZip(): Promise<void> {
  const code = await fetch("./assets/input.txt")
  const blob = await downloadZip([code]).blob();
  const base64Data = await this.blobToBase64(blob);
  await FileSharer.share({
    filename: "input.zip",
    base64Data: base64Data,
    contentType: "application/zip",
  })
}

Answer 4

Consider making the following adjustments to your code: (keeping the previous answer unchanged could help others who want to utilize the Observable strategy, unlike your scenario where using Promise is recommended)

ngOnInit(): void {
  this.fileZip();
}

private blobToBase64(blob: Blob): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = reject;
    reader.onabort = reject;
    reader.onload = () => resolve(reader.result as string);
    reader.readAsDataURL(blob);
  })
}

private async fileZip(): Promise<void> {
  const code = await fetch("./assets/input.txt")
  const blob = await downloadZip([code]).blob();
  const base64Data = await this.blobToBase64(blob);
  await FileSharer.share({
    filename: "input.zip",
    base64Data: base64Data,
    contentType: "application/zip",
  })
}

Answer 5

Answer №3

Here is a code snippet that might help you:

functionZipFiles() {
constfiles = awaitfetch("./data/files.txt");
varzipFile = awaitcreateZip(files);
console.log(zipFile);
varzipData = newBlob();
zipData.readAsDataURL(zipFile); 
zipData.onloadend = ()=> {
constresult = zipData.resultasstring;
constencodedData = result.split(',')[1];
console.log(encodedData)
DownloadManager.downloadFile({
filename:"archive.zip",
data: encodedData,
type:'application/zip'
    });
  }
}

Answer 6

Here is a code snippet that might help you:

functionZipFiles() {
constfiles = awaitfetch("./data/files.txt");
varzipFile = awaitcreateZip(files);
console.log(zipFile);
varzipData = newBlob();
zipData.readAsDataURL(zipFile); 
zipData.onloadend = ()=> {
constresult = zipData.resultasstring;
constencodedData = result.split(',')[1];
console.log(encodedData)
DownloadManager.downloadFile({
filename:"archive.zip",
data: encodedData,
type:'application/zip'
    });
  }
}

Can a blob file be transformed into base64Data using Javascript specifically in Ionic and Angular frameworks?

Answer №1

Answer №2

Answer №3

Similar questions

Align a button within an input field to be in line with a stacked label in

Exploring within the Angular submodule path

Identify the classification of unfamiliar items

Looking for a streamlined process to manage the development and publication of multiple versions of the React module using the "yarn/npm link" workflow

What is the best way to retrieve Firebase data and assign it to a variable in React after using setState

Firefox compatibility issue with Angular JS for downloading excel files

Issues with finding your way

Extending Mongoose's capabilities with header files for the "plugin" feature, utilizing the .methods and .statics methods

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

Saving the initial and final days of each month in a year using javascript

Solving the challenge of handling multiple text inputs in Laravel Blade using Vue.js v-model within a @

Where is the best location to store types/interfaces so that they can be accessed globally throughout the codebase?

Checking the validity of date inputs - microservice for timestamps

TypeScript combined with Vue 3: Uncaught ReferenceError - variable has not been declared

Encountering a 404 error in Angular MVC project while trying to load a

Issue with Angular 5 - Deselect all checkboxes not reflecting in the UI

Using jQuery to scroll within a table

What causes the "undefined" error in Node.js when using a

Guide to deactivating the user interface in AngularJS until receiving a server response

The error with removing the form field control in Angular 7 persists