Ionic Native HTTP call retrieves Blob without proper data type

I am currently working on a code snippet that extracts image strings and encodes them as Blob objects.

const reqOptions: any = {
    method: 'get',
    responseType: 'blob',
    headers: {
        accept: 'image/*'
    }
}
ionresp = await this.ionicHttp.sendRequest(url, reqOptions)

After logging the Blob object, I noticed it has the following details:

Blob {size: 15312, type: ""}

I actually need the Blob to have a type of image/png. However, I am facing some challenges in converting or manipulating the data to achieve the desired Blob type.

When attempting to retrieve the data using ionicHttp.get() and manually convert it into a Blob, the ionresp ends up being an empty Blob.

resp.Data = new Blob([ionresp], {type: type})
angulartypescripthttpblobionic-native

Answer №1

The Blob did not present any errors, but the FileReader was not functioning properly in Capacitor. As a result, I had to come up with a workaround in order to get it to work correctly.

getFileReader(): FileReader {
    const fileReader = new FileReader();
    const zoneOriginalInstance = (fileReader as any) 
    ["__zone_symbol__originalInstance"];
    return zoneOriginalInstance || fileReader;
}

convertBlobToBase64(blob: Blob): Promise<string> {
    return new Promise<string>((resolve, reject) => {
        let reader = this.getFileReader();
        reader.readAsDataURL(blob);
        reader.onload = () => resolve(reader.result.toString());
        reader.onerror = error => reject(error);
    })
}

This workaround is essential because Capacitor creates its own Zone for FileReader, making it difficult for other code to interact with it effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error retrieving the latest token in Angular before the component has fully loaded

I am seeking relevant advice to address my specific need: In my Angular application, I have implemented a jwt-based authentication system. After obtaining a new token and refresh token, I have set up a setTimeout function to ensure the token is refreshed ...

angulartypescriptauthenticationjwtrefresh-token

Encountering issues with updating subdocuments using mongoose

When attempting to update data from a subdocument using mongoose, I am encountering some issues Below is the data model: { status: 'regular', devices: [ { ip: 'deviceIp', active: true, _id: 5f4c05cb4708cf0e37a68ac0, ...

javascriptnode.jsmongodbtypescriptmongoose

exclude a few countries from ngx-intl-tel-input

I'm facing an issue where I need to remove certain countries, like Mexico, from the list displayed in ngx-intl-tel-input. Even after trying the 'excludeCountries' option, it doesn't seem to be working for me. Below is a snippet of my ...

htmlangulartypescript

Is there any drawback in transforming Observables into promises?

There are situations where subscribing in a component is necessary instead of using an async pipe. In scenarios where only one value will be emitted by the observable, is there any drawback or downside to converting it to a promise? If we are not subscrib ...

angularrxjs

In TypeScript, develop a specialized Unwrap<T> utility type

After successfully creating a helper type to unwrap the inner type of an Observable<T>, I began wondering how to make this type completely generic. I wanted it to apply to any type, not just Observable, essentially creating Unwrap<T>. Here is ...

typescript

Displaying a spinner and loading animation using Angular and ngRx

As I develop an Angular application with ngRx, I strive to follow best practices. However, I have reached a point where I am unsure how to handle asynchronous operations properly, especially in terms of providing effective feedback to the user. It is cruc ...

angularreduxngrx

Utilizing a TypeScript Variable as a Tagname in an HTML File within Angular

This specific problem is originally documented in this post. Despite being flagged as a duplicate, my scenario differs because the HTML content at hand is too extensive for utilizing innerHTML. The structure of my component's HTML file is as follows: ...

htmlangulartypescript

TS2339 Error: The property does not exist on this particular type when referencing a file relatively

Currently, I am in the process of developing my own UMD library using typescript and webpack. However, I encountered an issue when importing a file that resulted in the error TS2339 (Property 'makeRequest' does not exist on type 'typeof Util ...

typescript

Navigating through different directories when using the Angular CLI

Is it possible to run my app without using the 'cd' command? I attempted the following methods: ng s --servePath=\Projects\front-user\ --optimization --aot And also: ng s \Projects\front-user\ --optimization --aot ...

angularangular-cli

What is the process for inheriting a parent component's template in Angular 4?

Is there a way to inherit the template from a parent component in Angular 4 without overriding it completely? Many tutorials show how to override the parent component's template like this: import { Component } from '@angular/core'; import { ...

angular

How can I fix the TypeScript error stating that "Dayjs is missing properties from type Date" that occurs while using Day.js alongside Material-UI DatePicker?

As I integrate Day.js with Material-UI's DatePicker component in my React project, I encounter an issue. Setting the minDate and maxDate properties to Day.js objects results in a TypeScript error: Type 'Dayjs' is missing the following proper ...

reactjstypescriptmaterial-uidatepickerdayjs

AngularJS providing visual indication for processing server requests

What is the proper Angular approach to indicate to the user that the application is waiting for a response from the server? I currently have a factory with the following code: app.factory('MyAppFact', ['$http', '$q', functi ...

httpangularjs

A guide on transferring files between shared and other folders using Angular 2

In my shared folder, I created a subfolder named activities. Within this activities folder, I included HTML and CSS files to be fetched by another folder called User. However, I encountered an error: ERROR Error: Uncaught (in promise): Error: Cannot fin ...

angular

When delving into an object to filter it in Angular 11, results may vary as sometimes it functions correctly while other times

Currently, I am working on implementing a friend logic within my codebase. For instance, two users should be able to become friends with each other. User 1 sends a friend request to User 2 and once accepted, User 2 is notified that someone has added them a ...

javascriptangulartypescriptrxjs

Setting the resolve signature in IDialogOptions using TypeScript with the $mddialog service of Angular Material is an important feature to understand

At the moment, the IDialogOptions resolve signature is as follows: resolve? : ng.IPromise<any> However, based on the documentation, it should also be able to accept functions that return a promise. Therefore, I have modified it to the following str ...

javascriptangularjstypescriptangular-materialmddialog

What is the best way to connect my Typescript NextJS code to my Express API?

My goal is to extract data from my API, which is providing the following JSON: [ { project: "Challenges_jschallenger.com" }, { project: "Using-Studio-Ghilis-API-With-JS-Only" }, { project: "my-portfolio-next" }, { proj ...

typescriptexpressnext.js

The NodeJS application experiences a crash if incorrect parameters are provided to the API

Currently, I have built a CRUD API using TypeScript with Node.js, Express, and MongoDB. My goal is to ensure that the API functions correctly when the correct parameters are sent through a POST request. However, if incorrect parameters are passed, the Node ...

javascriptnode.jstypescriptapiexpress

Encountering an EACCES error while trying to install the Angular CLI through npm. The issue stems from insufficient writing permissions for the /usr

Attention: An important notice for users of npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is highly recomm ...

angularmacosnpm

Is it a common issue that sound.stop() doesn't seem to function properly, while sound.play() operates successfully within Howler

I am having trouble utilizing Howler.js in Reactjs with typescript. While I can successfully play the sound, pausing or stopping it seems to be an issue. Below is the code snippet: This component takes all the audio details as props. I used console.log() ...

javascriptreactjstypescriptreact-nativehowler.js

Error message stating that Typescript generics using types 'T' and 'number' do not overlap

Here is a scenario to consider: function example<T>(t: T): boolean { return t === 1; } The message received states This condition will always return 'false' since the types 'T' and 'number' have no overlap.. To resol ...

javascripttypescript