fix(fetch): fix issue with cloning bodies (#72)

* fix: issue with cloning bodies
chore: updated packages to @remix-run/web

* oops

* fix: fix root cause of clone issue
chore: revert remix-run#5

The issue was strings were being fed through the Uint8Array stream instead of being encoded.

* add more tests

* fix: cleanup imports

---------

Co-authored-by: Jacob Ebey <[email protected]>
Co-authored-by: Irakli Gozalishvili <[email protected]>

Author: 3 people

packages/fetch/package.json

@@ -77,6 +77,8 @@
     "@types/mocha": "^9.1.0",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
+    "abort-controller": "^3.0.0",
+    "@web-std/file": "^3.0.2",
     "abortcontroller-polyfill": "^1.7.1",
     "busboy": "^0.3.1",
     "c8": "^7.3.0",

packages/fetch/src/utils/form-data.js

@@ -44,20 +44,21 @@ export const getBoundary = () => randomBytes(8).toString('hex');
  * @param {string} boundary
  */
 export async function * formDataIterator(form, boundary) {
+	const encoder = new TextEncoder();
 	for (const [name, value] of form) {
-		yield getHeader(boundary, name, value);
+		yield encoder.encode(getHeader(boundary, name, value));
 
 		if (isBlob(value)) {
 			// @ts-ignore - we know our streams implement aysnc iteration
 			yield * value.stream();
 		} else {
-			yield value;
+			yield encoder.encode(value);
 		}
 
-		yield carriage;
+		yield encoder.encode(carriage);
 	}
 
-	yield getFooter(boundary);
+	yield encoder.encode(getFooter(boundary));
 }
 
 /**

packages/fetch/test/request.js

@@ -4,11 +4,10 @@ import {TextEncoder} from 'util';
 import AbortController from 'abort-controller';
 import chai from 'chai';
 import FormData from 'form-data';
-import {Blob} from '@web-std/fetch';
-import { ReadableStream } from '@web-std/fetch';
+import { Blob, ReadableStream, Request, FormData as WebFormData} from '@web-std/fetch';
+import { File } from '@web-std/file';
 
 import TestServer from './utils/server.js';
-import {Request} from '@web-std/fetch';
 
 const {expect} = chai;
 
@@ -19,6 +18,7 @@ describe('Request', () => {
 	before(async () => {
 		await local.start();
 		base = `http://${local.hostname}:${local.port}/`;
+		global.File = File;
 	});
 
 	after(async () => {
@@ -384,4 +384,58 @@ describe('Request', () => {
 			expect(result).to.equal('a=1');
 		});
 	});
+
+	it('should read formData after clone with web FormData body',async () => {
+		const ogFormData = new WebFormData();
+		ogFormData.append('a', 1);
+		ogFormData.append('b', 2);
+		ogFormData.append('file', new File(['content'], 'file.txt'));
+
+		const request = new Request(base, {
+			method: 'POST',
+			body: ogFormData,
+		});
+		const clonedRequest = request.clone();
+
+		return clonedRequest.formData().then(async clonedFormData => {
+			expect(clonedFormData.get('a')).to.equal("1");
+			expect(clonedFormData.get('b')).to.equal("2");
+			const file = clonedFormData.get('file')
+			if (typeof file !== "object") {
+				throw new Error("File is not an object");
+			}
+			expect(file.name).to.equal("file.txt");
+			expect(file.type).to.equal("application/octet-stream");
+			expect(file.size).to.equal(7);
+			expect(await file.text()).to.equal("content");
+			expect(file.lastModified).to.be.a('number');
+		});
+	});
+
+	it('should read formData after clone with node FormData body',async () => {
+		const ogFormData = new FormData();
+		ogFormData.append('a', '1');
+		ogFormData.append('b', '2');
+		ogFormData.append('file', Buffer.from('content'), { filename: "file.txt" });
+
+		const request = new Request(base, {
+			method: 'POST',
+			body: ogFormData,
+		});
+		const clonedRequest = request.clone();
+
+		return clonedRequest.formData().then(async clonedFormData => {
+			expect(clonedFormData.get('a')).to.equal("1");
+			expect(clonedFormData.get('b')).to.equal("2");
+			const file = clonedFormData.get('file')
+			if (typeof file !== "object") {
+				throw new Error("File is not an object");
+			}
+			expect(file.name).to.equal("file.txt");
+			expect(file.type).to.equal("text/plain");
+			expect(file.size).to.equal(7);
+			expect(await file.text()).to.equal("content");
+			expect(file.lastModified).to.be.a('number');
+		});
+	});
 });