What is the best method for merging multiple Files (as File[]) into a single Blob?

Is it possible to send a POST request with a form-data body using Postman, along with the following key-value pairs?

https://i.sstatic.net/VC2LYMkt.png


When attempting to include multiple files, designated as File[], within a single Blob (as shown in the sample below):

const convertFilesToFormData = (files: File[]): FormData => {
  let formData = new FormData();
  formData.append("files", files);
  return formData;
} // NOTE: This is a simplified version of my original function.

An error was encountered, stating:

No overload matches this call.
  Overload 1 of 3, '(name: string, value: string | Blob): void', gave the following error.
    Argument of type 'File[]' is not assignable to parameter of type 'string | Blob'.
      Type 'File[]' is missing the following properties from type 'Blob': size, type, arrayBuffer, stream, text
  Overload 2 of 3, '(name: string, value: string): void', gave the following error.
    Argument of type 'File[]' is not assignable to parameter of type 'string'.
  Overload 3 of 3, '(name: string, blobValue: Blob, filename?: string | undefined): void', gave the following error.
    Argument of type 'File[]' is not assignable to parameter of type 'Blob'.ts(2769)

I am seeking information on whether it is feasible and the techniques required for converting to the Blob type for future fetch requests.

Answer №1

When using <code>formData.append()
, it does not accept File[]. For more information, check out FormData/append#value

You can use either a string or Blob (including subclasses like File)

Here is a function to convert files to FormData:
const convertFilesToFormData = (files: File[]): FormData => {
  let formData = new FormData();
  for (const file of files) {
    formData.append("files", file);
  }
  return formData;
}

TS Playground

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

Generate a biscuit within a text field while typing, then transmit it

Is it possible to create a cookie in a textarea onkeypress and then send the cookie to a result page? Essentially, if the user types B or R in the textarea, can a cookie be created and sent to a result page? Below is the code snippet for each page: Exerci ...

HTML control for adjusting the pan and tilt of a device

I'm looking to develop an interactive input where users can drag a dot within a box and see the 2D coordinates of that dot displayed. The goal is to use this feature to control pan and tilt values. A similar functionality from another application is s ...

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

The margin and width of a div element with the position set to fixed and display set to table-cell are not rendering correctly

Is there a way to keep my .nav-container position: fixed; without creating a gap between it and the .page-content at certain window widths? When I set the position to fixed, a small white line appears between the red background of the .nav-container and th ...

Sending Python Object from Django View to Javascript Script in Template

Here is a basic code snippet created solely to illustrate a problem. While the task at hand can be achieved without JavaScript, I am exploring how to accomplish it using JavaScript for my actual code where it is necessary. In view.py Inside the play_game ...

Typescript throwing an exception for a properly defined parameter

Using a combination of NextJs and typescript, I am encountering an issue when passing a correctly typed prop. The error that is displayed is as follows: ./pages/jobs.tsx:100:15 Type error: Type '{ job: jobType; key: number; handleTagClick: (tag: strin ...

Ways to simulate file operations in sinon?

I have a function that unzips a file from the directory, and it is working perfectly fine. index.js const unZip = async (zipFilePath, destDir) => { await util.promisify(fs.mkdir)(destDir); return new Promise((resolve, reject) => { fs.create ...

Which Client-Side JavaScript Frameworks Pair Seamlessly With Node.js, Express.js, and socket.io.js?

Currently, I am in the process of developing a web application utilizing Node.js, Express.js, and socket.io.js on the server side. Are there any front-end frameworks (such as Agility, Angular, Backbone, Closure, Dojo, Ember, GWT, jQuery, Knockback, Knocko ...

Converting JSON data into an array using JavaScript

Stored in a variable named "response", I have the JSON value below: {"rsuccess":true,"errorMessage":" ","ec":null,"responseList":[{"id":2,"description":"user1"},{"id":1,"description”:"user2"}]} var users=response.responseList; var l = users.length; H ...

The button's background color will vanish if you click anywhere outside the button or on the body of

Struggling with a tabpane created using HTML, CSS, and JavaScript. The problem arises when the background color of the active tab's button disappears upon clicking outside the button or on the body. While switching between tabs, I can change the color ...

Troubleshooting issues with the 'date' input type feature on mobile devices

When I use the following code: <input type='month' ng-readonly='vm.isReadonly' required min="{{vm.threeMonthsAgo}}" max='{{vm.oneMonthAhead}}'/> I am experiencing some difficulties on mobile devices that do not occur o ...

Tips for preventing the newly updated value from being linked to another array within Angular 13

Currently, I am using angular13 and working on a functionality where there is a button to move items from the left side to the right side. Interestingly, when an item is moved from the left to the right side and then edited under the right side, the edited ...

Error: Trying to access 'product-1' property on an undefined object

Having trouble displaying JSON data in my React.js project, I've been stuck on an error for the past couple of days with no luck in solving it. The JSON data is stored in a file named products.json: { "product-1": [ { ...

Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

I currently have a JSON object stored in the database: { "ui": {}, "title": "Hola mundo 2", "values": {}, "properties": {}, "description": "descripcion" } Within the Laravel controller, ...

There was a glitch encountered during the execution of the cordova subprocess, with no accompanying explanation

When I try to compile my ionic angular build for iOS using ionic cordova build --prod --release, I am encountering the following error: After running the command again with the --verbose flag, this is the detailed outcome I received: Upon attempting to p ...

Bootstrap modal fails to appear on screen

Using PHP, I generate a link from the controller. The link is stored in $retailer["url"] as 0125myimage.jpg <a onClick="crop('.$retailer["url"].')" data-target="#styledModal3" href="#" class="fa fa-edit lupa"></a> Here is my JavaSc ...

useEffect initiates all actions

I'm currently exploring hooks functionality within a Next.JS project. I've successfully used a useEffect to track scrolling behavior in order to dynamically change the content displayed in a header when the page is scrolled. const [ scrollY, setS ...

Having trouble with the Jquery Slider script?

I recently integrated a slider from into my website, following the installation instructions. However, I seem to be facing some conflicts with another script that controls animated div movements on the same page. Upon loading the page, all elements of th ...

When TypeScript compiles without errors, the resulting JavaScript file still displays issues

As a newcomer to TypeScript, I decided to experiment with custom type declarations using this straightforward code snippet. The Code Here is the script I wrote: // app.ts type Customer = { name: String, isFrequentVisitor: Boolean, } type Order = { ...