File type error when uploading file via formData

[PaganMuffin]

When trying upload file with formData miniflare is throwing following error:

/home/pagan/webdev/kvms/backend/node_modules/formdata-node/lib/FormData.js:286
      throw new TypeError(
            ^
TypeError: Failed to execute 'append' on 'FormData':  parameter 2 is not one of the following types: ReadableStream | ReadStream | Readable | Buffer | File | Blob
    at FormData.__setField (/home/pagan/webdev/kvms/backend/node_modules/formdata-node/lib/FormData.js:286:13)
    at FormData.append (/home/pagan/webdev/kvms/backend/node_modules/formdata-node/lib/FormData.js:406:17)
    at FileStream.<anonymous> (/home/pagan/webdev/kvms/backend/node_modules/@mrbbot/node-fetch/lib/index.js:463:29)
    at FileStream.emit (node:events:406:35)
    at endReadableNT (node:internal/streams/readable:1329:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)

This error isn't showing when using wrangler dev

wrangler.toml flags

compatibility_flags = [ "formdata_parser_supports_files" ]
compatibility_date = "2021-09-09"

Simple code to test:

const handler = async (request) => {
    const fd = await request.formData()
    const filename = fd.get('file').name
    return new Response(filename,{status:200})
}

addEventListener('fetch', event => event.respondWith(handler(event.request)))

Miniflare version: 1.4.1

[PaganMuffin]

Looks like .append() method from formdata-node (v2.5.0) is expecting Blob, Stream or Buffer for data (second argument) but @mrbbot/node-fetch is passing a string.
node-fetch: https://github.com/mrbbot/node-fetch/blob/master/src/body.js#L267
formdata-node (branch 2.x): https://github.com/octet-stream/form-data/blob/2.x/lib/FormData.js#L285

[mrbbot]

Hey! 👋 For the next major version of Miniflare, the FormData implementation will come from undici, which should be more spec-compliant. I'll make sure I've got tests for file uploads too. 👍

[octet-stream]

I don't think undici will solve this problem. The error seem to appear because you pass a file as a string, but the filename argument can only be used with File or Blob. You need to fix the way how you upload files from what you get with busboy.

Browsers will throw you same error when the third argument is set and the second is a string:

Details

[octet-stream]

They don't even have FormData parser in their BodyMixin as of now: https://github.com/nodejs/undici/blob/68a17943f4d6af5f27d36ab10471f5e8860a1ede/lib/fetch/body.js#L307-L309

The problem can be solved if you just convert files payload into Blob or File and set the right arguments for each type of the value. You can just upgrade formdata-node to latest version or use fetch-blob (in case if you don't need CJS) to get both of these classes.

---

For latest formdata-node you'll also need to include a multipart/form-data encoder into your node-fetch fork, such as form-data-encoder because node-fetch does not include one in v2 (v3 does and it even will have form-data parser when this PR will be merged)

[mrbbot]

Hey! 👋 The first pre-release of Miniflare 2 has just been released, including support for the formdata_parser_supports_files compatibility flag. Without the flag, uploaded files will be treated as regular string fields. You can find the full changelog here and install it with npm i miniflare@next -D. Please let me know if you have any other issues, and feel free to ask questions in the #miniflare channel of the Cloudflare Workers Discord server.