Submitting form-data via axios fails with dataSize=0

Dragos Strugar 0
Viewed 75

I'm using the form-data npm package to send a list of images from my server (node/express) to another server. I'm using axios to send the form data.

The way I'm getting the list of images is getting them from a URL in a blob format and attaching them to form data like so: formData.append('pictures[]', picture).

Trouble is that in some cases when I try to submit the form data to another server, I'm getting this error below. Thing is that this doesn't happen in all cases, that's what's weird about all this.

{
  "message": "Request failed with status code 500",
  "name": "Error",
  "stack": "Error: Request failed with status code 500n    at createError (/app/node_modules/axios/lib/core/createError.js:16:15)n    at settle (/app/node_modules/axios/lib/core/settle.js:17:12)n    at IncomingMessage.handleStreamEnd (/app/node_modules/axios/lib/adapters/http.js:293:11)n    at IncomingMessage.emit (node:events:525:35)n    at IncomingMessage.emit (node:domain:489:12)n    at endReadableNT (node:internal/streams/readable:1359:12)n    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)",
  "config": {
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": null,
    "maxBodyLength": null,
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Content-Type": "multipart/form-data; boundary=--------------------------505025809634644491355142",
      "User-Agent": "axios/0.24.0"
    },
    "method": "post",
    "url": "<some url here>",
    "data": {
      "_overheadLength": 375,
      "_valueLength": 136604,
      "_valuesToMeasure": [],
      "writable": false,
      "readable": true,
      "dataSize": 0,
      "maxDataSize": 2097152,
      "pauseStreams": true,
      "_released": true,
      "_streams": [],
      "_currentStream": null,
      "_insideLoop": false,
      "_pendingNext": false,
      "_boundary": "--------------------------505025809634644491355142",
      "_events": {},
      "_eventsCount": 1
    }
  },
  "status": 500
}

As you can see from the error, dataSize is 0, which is totally unexpected. I put a few images in there.

Anyone experiences this before or can point me to resources which can help me debug this?

Here is the code to add all images to form data:

const form = new FormData()
let promises = []
for (let i = 0; i < pictureUrls.length; i++) {
  promises.push(axios.get(pictures[i], {responseType: 'blob'}));
}
Promise.all(promises).then(values => {
  for (let i = 0; i < values.length; i++) {
    form.append('pictures[]', values[i].data);
  }
})

Here is the code I'm using to send the images:

axios.post(URL, form, {auth, headers: form.getHeaders(), maxContentLength: Infinity, maxBodyLength: Infinity }
form-data axios node.js
1 Answers

I would suggest that you simply just use built in fetch instead of using axios (require NodeJS v18)

NodeJS have built in support for fetch, FormData and Blobs.
But they don't support getting file/blobs backed up by the filesystem yet [1]

But there FormData implementation supports 3rd party Blob implementations. hence why I recommend you to install fetch-blob

import { fileFromSync } from 'fetch-blob/from.js'

// In case you are using CommonJS
// const { fileFromSync } = await import('fetch-blob/from.js')

const file = fileFromSync('package.json')
const fd = new FormData()
const res = await fetch('https://httpbin.org/post', { 
  method: 'POST', 
  body: fd 
})
const json = await res.json()

it knows how to serilize and setting the correct request headers with boundary.

userNve40
Related