Is there a way to attach a Blob/File array to formData in typescript?

If I didn't have an ARRAY of files, this method would work perfectly. However, it needs to be in the form of an Array.

  let file1 = new File([""], "filename");
  let file2 = new File([""], "filename");
  let files = [file1, file2];
  let formData = new FormData();
  formData.append('files', files);

In JavaScript, this code runs smoothly. But in TypeScript, I encounter this error:

TS2345: Argument of type 'Blob[]' is not assignable to parameter of type 'string | Blob'.   Type 'Blob[]' is not assignable to type 'string'.

Is there any alternative solution instead of using // @ts-ignore?

Additionally, the REST API that I am interacting with requires the formData to be a Blob/File Array, so making changes there is not an option.

typescriptfileblob

Answer №1

To tackle this issue, you may need to follow these steps:

const file1 = new File([], 'filename');
const file2 = new File([], 'filename');
const filesArray = [file1, file2];
const formData = new FormData();
for (let file of filesArray){
    formData.append('files', file);
}

Could you please confirm if this solution is effective for you?

I came up with this approach after reading through the conversation on: How use formData.append for a array in typescript

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

Adjusting the settimeout delay time during its execution

Is there a way to adjust the setTimeout delay time while it is already running? I tried using debounceTime() as an alternative, but I would like to modify the existing delay time instead of creating a new one. In the code snippet provided, the delay is se ...

javascriptangulartypescriptrxjs6

Generating data types based on the output of functions

I'm currently working on optimizing my typescript react code by reducing repetition. I'm curious to know if there's a way to generate a type based on the return type of a known function? For example: const mapStateToProps = (state: StoreSt ...

reactjstypescripttypescript-typings

Get started with adding a Typescript callback function to the Facebook Login Button

I am in the process of implementing Facebook login into my Angular7 application using Typescript. Although I have successfully integrated Facebook's Login Button plugin for logging in, I am facing issues with providing a callback method to the button& ...

javascriptangulartypescriptfacebook-javascript-sdk

Is it possible to invoke JavaScript code from TypeScript?

I'm struggling with calling a JavaScript file from TypeScript. After resolving one import issue and adjusting the base function for tsc recognition, I'm now stuck on recognizing a declared function prototype in the JavaScript file. Although I ha ...

javascripttypescript

Learn how to define an array of member names in TypeScript for a specific type

Is there a way to generate an array containing the names of members of a specific type in an expression? For example: export type FileInfo = { id: number title ?: string ext?: string|null } const fileinfo_fields = ["id","ext&qu ...

typescript

Using a functional wrapper component to reset the modal field in Reactstrap upon closing and reopening

In the main component that displays a list of to-do tasks, we have the ability to add or edit existing tasks. To facilitate this functionality, a separate wrapper was created. import React, { useEffect, useState } from 'react'; import { Label ...

reactjstypescriptreact-reduxreactstrap

AuthGuard in Ionic 4 causing delay in page routing permissions

In my ionic 4 app, I store user information natively. The goal is to direct users to the Home Page if their information is already stored when they open the app. If not, they should be routed to the Login Page - pretty standard procedure. However, the iss ...

angulartypescriptauthenticationionic-framework

Is the performance impacted by using try / catch instead of the `.catch` observable operator when handling XHR requests?

Recently, I encountered an interesting scenario. While evaluating a new project and reviewing the codebase, I noticed that all HTTP requests within the service files were enclosed in a JavaScript try / catch block instead of utilizing the .catch observable ...

javascriptajaxangulartypescript

Using ngFormModel with Ionic 2

How can I properly bind ngFormModal in my Ionic 2 project? I am facing an issue while trying to import it on my page, resulting in the following error message: Uncaught (in promise): Template parse errors: Can't bind to 'ngFormModel' since ...

angulartypescriptionic2

Compile Node.js applications for multiple projects using Grunt

I am looking for an efficient way to build a multi-project application. Currently, my project structure looks like this: Each app is a nodejs application - parent folder (git root) |- app1 |-- app1-backend |-- app1-frontend |- app2 |- app3 Right now, I ...

node.jstypescriptbuildgruntjs

Setting the initial navigation theme based on route parameters from an external source, not within the StackNavigator

Is there a way to set the initial navigation theme based on the current route params without rendering the NavigationContainer and causing a flash of content with the default theme? Can the route be accessed from outside of the NavigationContainer without ...

typescriptreact-nativereact-native-navigation

Using ES6 and Typescript, when a button is clicked, apply a class to all TD elements within the button except for the first one. No need for jQuery

A sample table structure is shown below: <table> <tr> <td>1</td> <td>joe</td> <td>brown</td> <td><button onclick="addClasses()">Add Class to add TD's in t ...

javascripttypescript

How to retrieve the value of a variable accessible to all users in Angular?

In my code, I am working with a service variable called Users. Service: Users:BehaviorSubject<Array<any>> = new BehaviorSubject([]); I am updating the values in the component using this code: this.Service.Users.next([...this.Service.User ...

angulartypescriptrxjs-observables

"Error message: Trying to import a component in Angular, but encountering a message stating that the component has no exported

When creating a component named headerComponent and importing it into app.component.ts, an error is encountered stating that 'website/src/app/header/app.headerComponent' has no exported member 'headerComponent'. The code for app.headerC ...

angulartypescriptcomponents

What is the best way to prevent a font awesome icon from appearing in a span during data loading

I am currently working on an Angular 11 application where I have implemented an icon to trigger the loading of a graph. However, I have noticed that there is a delay in loading the graph when the icon is clicked. To prevent users from triggering the icon m ...

javascriptangulartypescriptrxjsredux-observable

A practical guide to troubleshooting typescript errors when exporting a map component

I encountered a typescript error when trying to export the map component with GoogleApiWrapper. It works fine when not wrapped in GoogleApiWrapper, but all my attempts to resolve the issue have failed. I would appreciate it if someone could review the code ...

reactjstypescriptgoogle-maps-react

Divide the string into several segments according to its position value

Here is a piece of text that I would like to divide into multiple sections, determined by the offset and length. If you have any questions or comments and would like to get in touch with ABC, please go to our customer support page. Below is a function ...

javascripttypescript

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...

javascriptangularhtmltypescript

Tips on utilizing the i18n t function within a TypeScript-powered Vue3 component

I am working on creating a control that can automatically manage interpolation for internationalization (i18n) strings: <script lang="ts"> import { ref, defineComponent, inject } from "vue"; import type { InterpolationItem, Inter ...

typescriptvuejs3vue-i18n

React with Typescript - Type discrepancies found in Third Party Library

Recently, I encountered a scenario where I had a third-party library exporting a React Component in a certain way: // Code from the third party library that I cannot alter export default class MyIcon extends React.Component { ... }; MyIcon.propTypes = { ...

javascriptreactjstypescripttypes