Error making HTTP POST with File object in request body after upgrading to 7.X

[donalmurtagh]

I upgraded from Cypress 6.8.0 to 7.0.1. After the upgrade, when this function is called by one of the Cypress tests

async saveTask (task, file) {
  const requestBody = new FormData()
  requestBody.append('file', file)

  return await http.post('/api/endpoint', requestBody, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
},

I get the following error

TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: 
The first argument must be of type string or an instance of Buffer or Uint8Array. Received type number (45)
    at write_ (_http_outgoing.js:696:11)
    at ClientRequest.write (_http_outgoing.js:661:15)
    at Request.write (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:1496:27)
    at /Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:546:20
    at Array.forEach (<anonymous>:null:null)
    at end (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:545:23)
    at Immediate._onImmediate (/Users/donal/Library/Caches/Cypress/7.0.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/request/request.js:578:7)
    at processImmediate (internal/timers.js:461:21)
 {
  code: 'ERR_INVALID_ARG_TYPE'
}

The http object that I use to make the POST request is an Axios instance and the file object that I append to the request body is a File. The file object is the cause of the problem, because if I don't append it to the request body, the error doesn't occur.

The error only occurs when the function is run by a Cypress test. Cypress uses Node.js, and judging by the error message above it seems the File type is not allowed. Furthermore, the Axios request config docs indicate that when Axios runs under Node, a File is not allowed.

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

So I guess I need to convert the File objects to something else, so that this function will work both within the app itself, and when run by Cypress.

On the server-side (a Spring Boot app), this file is bound to a

public void handlePost(
    RequestPart(value = "file") MultipartFile file) {

    // controller action body       
}

If my theory that the File type is the problem, what should I use instead and how should I do the conversion?

[lmiller1990]

I'm pretty curious why this broke between 6.8.0 and 7.0.1. Do you have a minimal repo I could use to debug? Ideally the backend would also been in Node, for ease of running locally.

[zernie]

I'm seeing the same err sometimes

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined
    at new NodeError (node:internal/errors:406:5)
    at Function.from (node:buffer:324:9)
    at /home/runner/work/archive/archive/e2e/node_modules/@chromatic-com/cypress/dist/index.js:16:46765
    at Array.map (<anonymous>)
    at writeArchives (/home/runner/work/archive/archive/e2e/node_modules/@chromatic-com/cypress/dist/index.js:16:46731)
    at /home/runner/work/archive/archive/e2e/node_modules/@chromatic-com/cypress/dist/index.js:16:47304
    at new Promise (<anonymous>)
    at saveArchives (/home/runner/work/archive/archive/e2e/node_modules/@chromatic-com/cypress/dist/index.js:16:47289)
    at prepareArchives (/home/runner/work/archive/archive/e2e/node_modules/@chromatic-com/cypress/dist/index.js:16:47493)
    at invoke (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:246:16)
    at /home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at RunPlugins.taskExecute (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:252:10)
    at RunPlugins.execute (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:166:21)
    at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:514:28)
    at EventEmitter.emit (node:domain:488:12)
    at process.<anonymous> (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:514:28)
    at process.emit (node:domain:488:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/home/runner/.cache/Cypress/13.3.3/Cypress/resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
    at emit (node:internal/child_process:951:14)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

@chromatic-com/cypress@^0.6.6
cypress@13.3.3: