[Bug?]: Uploading files through custom functions doesn't work

[c-ciobanu]

What's not working?

Uploading files using a custom function and fastify doesn't seem to work.
There was some discussion on the forum https://community.redwoodjs.com/t/uploading-files-using-redwood-function-and-fastify/5814/8 but there was no solution there so I'm opening an issue for it.

The Problem:

I am trying to create a custom function to upload files but it's not working.
I'm calling my custom function like this:

const formData = new FormData()
formData.append('file', blob)

await fetch('/.redwood/functions/uploadDocs', {
  method: 'POST',
  body: formData,
})

and getting the following response:

{
    "statusCode": 400,
    "code": "FST_ERR_CTP_INVALID_CONTENT_LENGTH",
    "error": "Bad Request",
    "message": "Request body size did not match Content-Length"
}

There seems to be a discrepancy on how the request body size is calculated on the server and the Content-Length header that is automatically calculated by the browser.

What I tried doing to make it work:
By looking around I discovered that if I comment out this code in the api-server package

redwood/packages/api-server/src/plugins/api.ts

Lines 41 to 45 in 605545e

	fastify.addContentTypeParser(
	['application/x-www-form-urlencoded', 'multipart/form-data'],
	{ parseAs: 'string' },
	fastify.defaultTextParser,
	)

and change it with:

fastify.addContentTypeParser(
  ['application/x-www-form-urlencoded', 'multipart/form-data'],
  function (req, payload, done) {
    done(null, req)
  }
)

the fetch will not fail anymore but I couldn't access the request body in the custom function probably because the content parser is not configured properly.

Another interesting thing is that if instead of changing the code in the api-server package I only comment it out and then add

fastify.addContentTypeParser(
  ['application/x-www-form-urlencoded', 'multipart/form-data'],
  function (req, payload, done) {
    done(null, req)
  }
)

to my api/src/server.ts the fetch will still not work.
Might be something to look into, it would be strange if the addContentTypeParser added in api/src/server.ts would not be applied.

Another option I tried was installing @fastify/multipart and then registering it in my api/src/server.ts as server.register(multipart) but with no success at all.

How do we reproduce the bug?

Create a simple custom function

// api/src/functions/uploadDocs/uploadDocs.ts
export const handler = async (event: APIGatewayEvent, _context: Context) => {
  logger.info(`${event.httpMethod} ${event.path}: uploadDocs function`)

  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      data: 'uploadDocs function',
    }),
  }
}

On the frontend call the function as such and check the network tab to see the error message

const formData = new FormData()
formData.append('file', blob)

await fetch('/.redwood/functions/uploadDocs', {
  method: 'POST',
  body: formData,
})

What's your environment? (If it applies)

No response

Are you interested in working on this?

• I'm interested in working on this

[ahaywood]

@c-ciobanu Thanks for taking the time to file this issue. I'm going to tag in another core team member to see if they can help resolve this.