The argument specified as 'Blob | Blob[]' cannot be assigned to a parameter expecting just a 'Blob'

I've been working on this code snippet:

        const heicReader = new FileReader();

        heicReader.onload = async () => {
          const heicImageString = heicReader.result;

          const { download_url } = await uploadPhotoToGcs({
            base64: heicImageString,
            type: 'image/png',
          });
          this.onSubmitImageMessage(download_url);
        };

        const blobUrl = URL.createObjectURL(imageData);
        const blobRes = await fetch(blobUrl);
        const imgBlob = await blobRes.blob();
        const convertedFile = await heic2any({ blob: imgBlob });

        heicReader.readAsDataURL(convertedFile);
        return;

But I'm getting an error with 

heicReader.readAsDataURL(convertedFile);
:

const convertedFile: Blob | Blob[]
Argument of type 'Blob | Blob[]' is not assignable to parameter of type 'Blob'.
  Type 'Blob[]' is missing the following properties from type 'Blob': size, type, arrayBuffer, stream, text

Any ideas on what's causing this issue?

typescript

Answer №1

Before utilizing the returned array of blobs, it is necessary to confirm that it is indeed an array:

const convertedFile = await heic2any({ blob: imgBlob });

if (!Array.isArray(convertedFile)) {
    heicReader.readAsDataURL(convertedFile);
} else {
    // Handle the scenario when convertedFile is an array of blobs
}

In addition to this, consider handling the situation where convertedFile is an array of blobs. Would you opt to read just the first one?

if (!Array.isArray(convertedFile)) {
    heicReader.readAsDataURL(convertedFile);
} else {
    heicReader.readAsDataURL(convertedFile[0]);
}

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

Filtering a key-value pair from an array of objects using Typescript

I am working with an array of objects containing elements such as position, name, and weight. const elements = [{ position: 3, name: "Lithium", weight: 6.941, ... },{ position: 5, name: "Boron", weight: 10.811, ... }, { position: 6, name: "Carbon", weight: ...

typescript

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

Instructions on transferring JSON data to clipboard using a button

How can I copy JSON data to clipboard using a button click? { "Version": "2012-10-17", "Statement": [ { "Sid": "VisualEditor0", "Effect": "Allow", "Action": [ ... ], "Resource": "*" } ] } I attempted to ...

angulartypescript

Angular 4 Operator for adding elements to the front of an array and returning the updated array

I am searching for a solution in TypeScript that adds an element to the beginning of an array and returns the updated array. I am working with Angular and Redux, trying to write a reducer function that requires this specific functionality. Using unshift ...

javascriptarraysangulartypescript

Determine the data type of parameters in TypeScript

I'm currently working on creating a function that takes a class (Clazz) as a parameter and returns an instance of the same class, like this: function createInstance(Clazz) { ... return new Clazz(); } Is there a way to automatically determine ...

typescript

Using React to render an icon based on the value of props

I am working on a vacation project using React (TS), NodeJS, and mySQL. I am attempting to implement save and like icons with Material UI based on certain props conditions. The icons are located within the div className "MenuContent". How can I create a fu ...

mysqlnode.jsreactjstypescript

Try using ngFor within the insertAdjacentHTML method

When a user clicks, I dynamically attach an element inside a template like this: this.optionValue = []; youClickMe(){ var moreput = ''; moreput += '<select">'; moreput += '<option *ngFor="let lup of opti ...

angulartypescript

Compiling Typescript with union types containing singleton types results in errors

I'm having trouble understanding why the code below won't compile: type X = { id: "primary" inverted?: boolean } | { id: "secondary" inverted?: boolean } | { id: "tertiary" inverted?: false } const a = true const x: X = { id: a ? ...

typescript

Substitute terms with the usage of array map

Here is an array for you (2) ['beginning=beginner', 'leaves=leave'] as well as a string its beginner in the sounds leave that has been converted to an array using the following code var words = text.split(' '); My goal ...

javascriptjquerytypescript

Adjusting the audio length in React/Typescript: A simple guide

I'm currently developing a web app with React and TypeScript. One of the components I created is called SoundEffect, which plays an mp3 file based on the type of sound passed as a prop. interface ISoundEffectProps { soundType: string, // durat ...

reactjstypescriptaudiomp3html5-audio

Creating OpenAPI/Swagger documentation from TypeScript code

I am in search of a solution to automatically create OpenAPI/Swagger API definitions based on my Node.JS/Express.JS/Typescript code. It would be perfect if I could simply add annotations to my Express Typescript base controllers and have the OpenAPI/Swagg ...

node.jstypescriptexpressswaggeropenapi

Exploring the NestJS framework using mongoose schema, interfaces, and DTOs: A deep dive

As a newcomer to nestJS and mongoDB, I find myself questioning the need to declare DTO, schema, and interface for every collection we aim to store in our mongoDB. For example, I have a collection (unfortunately named collection) and this is the DTO I' ...

mongodbtypescriptmongoosenestjs

Using {children} in NextJS & Typescript for layout components

I am looking to develop a component for my primary admin interface which will act as a wrapper for the individual screens. Here is the JavaScript code I have: import Header from '../Header' function TopNavbarLayout({ children }) { return ...

typescriptnext.js

Limit Typescript decorator usage to functions that return either void or Promise<void>

I've been working on developing a decorator that is specifically designed for methods of type void or Promise<void>. class TestClass { // compiles successfully @Example() test() {} // should compile, but doesn't @Example() asyn ...

typescript

Prevent modal from closing when clicking outside in React

I am currently working with a modal component in react-bootstrap. Below is the code I used for importing the necessary modules. import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalBody from "react-bootstrap/ModalBody"; impor ...

reactjstypescriptbootstrap-4react-bootstrap

The cause of Interface A improperly extending Interface B errors in Typescript

Why does extending an interface by adding more properties make it non-assignable to a function accepting the base interface type? Shouldn't the overriding interface always have the properties that the function expects from the Base interface type? Th ...

javascripttypescript

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Dealing with a React Native and TypeScript app here. I keep encountering an error from Fabric every week: "JSON.stringify cannot serialize cyclic structures." The frustrating part is that the error seems to pop up randomly, without any specific scenario tr ...

javascriptjsontypescriptobjectstringify

Exploring the capabilities of using the injectGlobal API from styled-components in a TypeScript

I've been attempting to utilize the simple injectGlobal API, but I am encountering difficulties getting it to work with TypeScript. Here is my setup in theme.tsx: import * as styledComponents from "styled-components"; import { ThemedStyledComponentsM ...

reactjstypescriptstyled-components

The keys within a TypeScript partial object are defined with strict typing

Currently, I am utilizing Mui components along with TypeScript for creating a helper function that can generate extended variants. import { ButtonProps, ButtonPropsSizeOverrides } from "@mui/material"; declare module "@mui/material/Button&q ...

javascriptreactjstypescriptmaterial-ui

Guide to pairing array elements in JavaScript

To streamline the array, only elements with a value equal to or greater than the set threshold will be retained. These selected elements will then be used to create a new array comprising multiple objects. Each object will consist of two properties: the st ...

javascriptarraystypescript