Skip to content

feat: add support for multipart/form-data #1606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ronag merged 10 commits into from
Sep 28, 2022
Merged

feat: add support for multipart/form-data #1606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a5cbef7
add support for multipart/form-data
cameron-robey Aug 17, 2022
6f9dd53
Handle busboy errors
cameron-robey Aug 19, 2022
ff3a079
linting
cameron-robey Aug 19, 2022
4bdc428
Catch emitted error
cameron-robey Aug 22, 2022
746d288
reject promise instead of throwing error
cameron-robey Aug 23, 2022
0580767
Add test for base64 encoded multipart/form-data
cameron-robey Aug 26, 2022
0a9785b
Move busboy from devDependencies to dependencies
cameron-robey Sep 9, 2022
0b4c505
Add test for busboy emitting error
cameron-robey Sep 9, 2022
b079acb
Rewrite tests
cameron-robey Sep 9, 2022
5e9e5a8
Update tests to avoid promises and callbacks
cameron-robey Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 43 additions & 2 deletions lib/fetch/body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use strict'

const Busboy = require('busboy')
Comment thread
mcollina marked this conversation as resolved.
const util = require('../core/util')
const { ReadableStreamFrom, toUSVString, isBlobLike } = require('./util')
const { FormData } = require('./formdata')
Expand All @@ -8,9 +9,9 @@ const { webidl } = require('./webidl')
const { Blob } = require('buffer')
const { kBodyUsed } = require('../core/symbols')
const assert = require('assert')
const { NotSupportedError } = require('../core/errors')
const { isErrored } = require('../core/util')
const { isUint8Array, isArrayBuffer } = require('util/types')
const { File } = require('./file')

let ReadableStream

Expand Down Expand Up @@ -397,7 +398,47 @@ function bodyMixinMethods (instance) {

// If mimeType’s essence is "multipart/form-data", then:
if (/multipart\/form-data/.test(contentType)) {
throw new NotSupportedError('multipart/form-data not supported')
const headers = {}
for (const [key, value] of this.headers) headers[key.toLowerCase()] = value

const responseFormData = new FormData()

let busboy
Comment thread
mcollina marked this conversation as resolved.

try {
busboy = Busboy({ headers })
} catch (err) {
// Error due to headers:
throw Object.assign(new TypeError(), { cause: err })
}

busboy.on('field', (name, value) => {
responseFormData.append(name, value)
})
busboy.on('file', (name, value, info) => {
const { filename, encoding, mimeType } = info
const base64 = encoding.toLowerCase() === 'base64'
const chunks = []
value.on('data', (chunk) => {
if (base64) chunk = Buffer.from(chunk.toString(), 'base64')
Comment thread
mcollina marked this conversation as resolved.
Copy link
Copy Markdown
Contributor

@repsac-by repsac-by Sep 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't just decrypt a base64 chunk, because the length of the base64 chunk must be a multiple of 4 characters.

Copy link
Copy Markdown
Member

@mcollina mcollina Sep 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand.

Copy link
Copy Markdown
Contributor

@repsac-by repsac-by Sep 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

const data = Buffer.from(Buffer.from('hello world').toString('base64'));

const chunks1 = [];
const chunks2 = [];
for (let offset = 0, step = 6; offset < data.length; offset += step) {
	const chunk = data.subarray(offset, offset + step);

	// Decode each chunk
	chunks1.push(Buffer.from(chunk.toString(), 'base64'));

	// Here we collect as is
	chunks2.push(chunk);
}

// Decode after the transfer is completed
const buffer = Buffer.from(Buffer.concat(chunks2).toString(), 'base64');

// hell�v�ld
console.log(await new Blob(chunks1).text());

// hello world
console.log(await new Blob([buffer]).text());

Copy link
Copy Markdown
Member

@mcollina mcollina Sep 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have the https://nodejs.org/api/string_decoder.html for this purpose.

Copy link
Copy Markdown
Contributor

@kibertoad kibertoad Sep 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mcollina does string decoder need to be applied somewhere in this code explicitly, or it will be called down the line automatically?

Copy link
Copy Markdown
Contributor

@kibertoad kibertoad Sep 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cameron-robey see what @repsac-by is suggesting, plus test to cover that case. inlining the code should be fine

Copy link
Copy Markdown
Member

@mcollina mcollina Sep 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the problem exactly? You need 4 bytes to decode base64 at minimum, so why don't you accumulate until you have 4 bytes of multiples?

Copy link
Copy Markdown
Contributor

@meyfa meyfa Sep 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mcollina I'm assuming that you mean: push chunks until the total length of unprocessed data is divisible by 4, then decode and clear the chunk array, and repeat with the next pieces of data. Accumulating like that seems unreliable, since it cannot be known when that multiple of 4 will be reached. It might happen only after a huge number of chunks. The streaming method suggested above is superior because the number of unprocessed bytes that are kept in memory never exceeds 3.

Copy link
Copy Markdown
Member

@mcollina mcollina Sep 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The one in the comment also looks good.

Copy link
Copy Markdown
Contributor

@kibertoad kibertoad Sep 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cameron-robey Do you need any help with the remaining part?

chunks.push(chunk)
})
value.on('end', () => {
const file = new File(chunks, filename, { type: mimeType })
responseFormData.append(name, file)
})
})
Comment thread
mcollina marked this conversation as resolved.

const busboyResolve = new Promise((resolve, reject) => {
busboy.on('finish', resolve)
busboy.on('error', (err) => reject(err))
Comment thread
mcollina marked this conversation as resolved.
})

if (this.body !== null) for await (const chunk of consumeBody(this[kState].body)) busboy.write(chunk)
busboy.end()
await busboyResolve

return responseFormData
} else if (/application\/x-www-form-urlencoded/.test(contentType)) {
// Otherwise, if mimeType’s essence is "application/x-www-form-urlencoded", then:

Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@
"@types/node": "^17.0.29",
"abort-controller": "^3.0.0",
"atomic-sleep": "^1.0.0",
"busboy": "^1.6.0",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"chai-iterator": "^3.0.2",
Expand Down Expand Up @@ -122,5 +121,8 @@
"testMatch": [
"<rootDir>/test/jest/**"
]
},
"dependencies": {
"busboy": "^1.6.0"
}
}
65 changes: 61 additions & 4 deletions test/fetch/client-fetch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const { Client, setGlobalDispatcher, Agent } = require('../..')
const nodeFetch = require('../../index-fetch')
const { once } = require('events')
const { gzipSync } = require('zlib')
const { promisify } = require('util')

setGlobalDispatcher(new Agent({
keepAliveTimeout: 1,
Expand Down Expand Up @@ -165,24 +166,80 @@ test('unsupported formData 1', (t) => {
})
})

test('unsupported formData 2', (t) => {
test('multipart formdata not base64', async (t) => {
t.plan(2)
// Construct example form data, with text and blob fields
const formData = new FormData()
formData.append('field1', 'value1')
const blob = new Blob(['example\ntext file'], { type: 'text/plain' })
formData.append('field2', blob, 'file.txt')

const tempRes = new Response(formData)
const boundary = tempRes.headers.get('content-type').split('boundary=')[1]
const formRaw = await tempRes.text()

const server = createServer((req, res) => {
res.setHeader('content-type', 'multipart/form-data; boundary=' + boundary)
res.write(formRaw)
res.end()
})
t.teardown(server.close.bind(server))

const listen = promisify(server.listen.bind(server))
await listen(0)

const res = await fetch(`http://localhost:${server.address().port}`)
const form = await res.formData()
t.equal(form.get('field1'), 'value1')

const text = await form.get('field2').text()
t.equal(text, 'example\ntext file')
})

test('multipart formdata base64', (t) => {
t.plan(1)

// Example form data with base64 encoding
const formRaw = '------formdata-undici-0.5786922755719377\r\nContent-Disposition: form-data; name="key"; filename="test.txt"\r\nContent-Type: text/plain\r\nContent-Transfer-Encoding: base64\r\n\r\ndmFsdWU=\r\n------formdata-undici-0.5786922755719377--'
const server = createServer((req, res) => {
res.setHeader('content-type', 'multipart/form-data')
res.setHeader('content-type', 'multipart/form-data; boundary=----formdata-undici-0.5786922755719377')
res.write(formRaw)
res.end()
})
t.teardown(server.close.bind(server))

server.listen(0, () => {
fetch(`http://localhost:${server.address().port}`)
.then(res => res.formData())
.catch(err => {
t.equal(err.name, 'NotSupportedError')
.then(form => form.get('key').text())
.then(text => {
t.equal(text, 'value')
})
})
})

test('busboy emit error', async (t) => {
t.plan(1)
const formData = new FormData()
formData.append('field1', 'value1')

const tempRes = new Response(formData)
const formRaw = await tempRes.text()

const server = createServer((req, res) => {
res.setHeader('content-type', 'multipart/form-data; boundary=wrongboundary')
res.write(formRaw)
res.end()
})
t.teardown(server.close.bind(server))

const listen = promisify(server.listen.bind(server))
await listen(0)

const res = await fetch(`http://localhost:${server.address().port}`)
await t.rejects(res.formData(), 'Unexpected end of multipart data')
})

test('urlencoded formData', (t) => {
t.plan(2)

Expand Down