Skip to content
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

Jump to bottom

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

Merged
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 1 commit
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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
33 changes: 31 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')
mcollina marked this conversation as resolved.
Show resolved Hide 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,35 @@ 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()

const busboy = Busboy({ headers })
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')
mcollina marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

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

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
Member

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
Contributor

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

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
Member

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
Contributor

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
Contributor

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
Member

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
Contributor

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
Member

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
Contributor

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)
})
})
mcollina marked this conversation as resolved.
Show resolved Hide resolved
const busboyResolve = new Promise((resolve) => busboy.on('finish', resolve))

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
35 changes: 26 additions & 9 deletions test/fetch/client-fetch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,21 +165,38 @@ test('unsupported formData 1', (t) => {
})
})

test('unsupported formData 2', (t) => {
t.plan(1)
test('multipart formdata', async (t) => {
t.plan(2)

// Construct example form data, with text and file 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')
res.setHeader('content-type', 'multipart/form-data; boundary=' + boundary)
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')
})
await new Promise((resolve) => {
server.listen(0, () => {
fetch(`http://localhost:${server.address().port}`)
.then(res => res.formData())
.then(formData => {
t.equal(formData.get('field1'), 'value1')
return formData.get('field2').text()
}).then(text => {
t.equal(text, 'example\ntext file')
resolve()
})
})
})
})

Expand Down