Appending files is not working after `formdata-node@4.4.1`

[DanielRamosAcosta]

Hello! I'm getting a weird error when trying to add files to a form.

I've created a library similar to supertest called tepper, and the other day the bot tried to upgrade formdata-node from 4.3.2 to 4.4.1. The CI of the PR was failing, and I've been trying to narrow up the error.

Finally, I've managed to reproduce the error in this separate repository: DanielRamosAcosta/form-data-issue. The CI is passing on the main branch, but it is failing after upgrade, as you can see in this PR.

Output at 4.3.2:

--form-data-boundary-xxxxxxxxxxxxxxxx
Content-Disposition: form-data; name="stream"; filename="file.txt"
Content-Type: text/plain

Stream content
--form-data-boundary-xxxxxxxxxxxxxxxx--

Output at 4.4.1

--form-data-boundary-xxxxxxxxxxxxxxxx
Content-Disposition: form-data; name="stream"

[object File]
--form-data-boundary-xxxxxxxxxxxxxxxx--

There seems to be a problem with the File detection at 4.4.1! No more time today, but I could give a try reproducing the error at this repo and providing a fix.

[jimmywarting]

fyi, there is built in functions now with the recent addition of fs.openAsBlob(path, options) and built in fetch and FormData() that makes this package a bit obsolete

import { File } from 'node:buffer'
import { openAsBlob } from 'node:fs'

const blob = await openAsBlob('./file.txt', { type: 'text/plain' }) // will just stat the file
const file = new File([blob], 'file.txt', { type: 'text/plain' })
const fd = new FormData()
fd.append('file', file)
new Response(fd).text().then(console.log)

[octet-stream]

Hi. Thanks for reaching me out with your issue. I've investigated it, here's what I found:
The problem appears to be in an invalid file detection, as you've guessed, but it happens in form-data-encoder, so I'm going to transfer the issue to that repository and handle it appropriately. In a meantime, you can either rename a file when you append it using set or append method's third argument, or wrap your file-ish object into a real File object, like this

import {FormData, File} from "formdata-node"

import {
  createReadableStream,
} from "./utils.mjs";

const fileObject = {
  type: "text/plain",
  name: "file.txt",
  [Symbol.toStringTag]: "File",
  stream() {
    return stream;
  }
}

const form = new FormData()

form.set("stream", new File([fileObject], fileObject.name, {type: fileObject.type}))

// or

form.set("stream", fileObject, fileObject.name)

Thing is, when you create an entry from File object via .set() or .append methods, you'll get the same object reference for each time you call .get(), .getAll(), or if you iterate over all entries using .entries(), .values(), .forEach(). This is the same behaviour as it the browsers. At least I've tested it in Chrome, Firefox and Safari. Same behaviour I did for file-ish objects - you'll get the same object as you put to FormData. For some reason, form-data-encoder@1.7.1 is unable to detect such object as File, hence the issue. I will figure where's the problem an release a new minor version with the fix.

You can test this behaviour in browsers and in Node.js with `formdata-node`, if you want. Here's the code

const file = new File(["Some text"], "file.txt", {type: "text/plain"})

const form = new FormData()

form.set("file", file)

console.log("When getting original file: %s, becuase it returns same reference", form.get("file") === file)

Array.from(form.values()).forEach(value => console.log("When iterating through .values() with original file: %s", value === file))

form.forEach(value => console.log("When iterating through .forEach() with original file: %s", value === file))

console.log("---- now we rename the file ----")

form.set("file", file, "new-file.txt")

console.log("When getting renamed file: %s, because file was renamed, and the new File instance was created", form.get("file") === file)

Array.from(form.values()).forEach(value => console.log("When iterating through .values() with renamed file: %s", value === file))

form.forEach(value => console.log("When iterating through .forEach() with renamed file: %s", value === file))

[octet-stream]

Well, I should've read GitHub warnings more carefully. Hope at least you got my answer via email.

Alright, everything is transferred.

[octet-stream]

The issue happens because in 1.x I was more strict when testing file-ish objects:

form-data-encoder/lib/util/isFileLike.ts

Lines 38 to 39 in 111c7e5

	&& (value as FileLike).size != null
	&& (value as FileLike).lastModified != null

If you're able to upgrade form-data-encoder to 2.x, this should solve your problem.

[octet-stream]

The fix is released under https://github.com/octet-stream/form-data-encoder/releases/tag/v1.8.0

Hope this will help.

Please, consider switch over 2.x, I am not going to support 1.x any further.

[octet-stream]

@jimmywarting That's a great news! However your comment is off-topic since the issue does not seem to be related to blob backed up by fs. But thank you anyway for pointing this up.

[DanielRamosAcosta]

Thanks @octet-stream, after upgrading to form-data-encoder to 1.8.0 everything is working now. Will try to upgrade to 2.x shortly, thanks!

[DanielRamosAcosta]

Just one more question @octet-stream. Version 2.x dropped CommonJs, however, from tepper I need to support CommonJS clients. I think that I need to stick with 1.8, do you see another solution?

[jimmywarting]

you can use dynamic import in cjs projects to load esm modules

import(pkg).then(...)

[octet-stream]

Yes, this should work. I also saw somebody making cjs version of popular packages, can't remember how those called... But you can find cjs version for latest versions of both formdata-node and form-data-encoder