Add support for Blob (#43)

Author: zefir-git

README.md

@@ -46,17 +46,14 @@ http.createServer(async (req, res) => {
     if (req.method === "POST" && req.headers["content-type"]) {
 
         // get the request body
-        const chunks: Uint8Array[] = [];
+        const body: Uint8Array[] = [];
         for await (const chunk of req)
-            chunks.push(chunk);
-        const body = Buffer.concat(chunks);
-
-        // create a multipart component to hold the content-type header (which includes the boundary) and the body
-        const component = new Component({
-                "Content-Type": req.headers["content-type"]
-            }, body);
-        // parse multipart from the component
-        const multipart = Multipart.part(component);
+            body.push(chunk);
+
+        // create a blob to hold the Content-Type header (which includes the boundary) and the body
+        const blob = new Blob(body, {type: req.headers["content-type"]});
+        // parse multipart from the blob
+        const multipart = await Multipart.blob(blob);
         console.log(multipart);
 
         res.end("ok");

src/Component.ts

@@ -43,15 +43,28 @@ export class Component implements Part {
     }
 
     /**
-     * Create a Component from a {@link File}. If file media type is available,
+     * Create a Component from a {@link !File}. If file media type is available,
      * it will be set in the `Content-Type` header. The file's contents will be used as the part's body.
      *
      * This method might be slow if a large file is provided as the file contents need to be read.
      *
      * @param file File instance to create the component from
+     * @deprecated Use {@link Component.blob}.
      */
     public static async file(file: File) {
-        return new Component(file.type.length > 0 ? {"Content-Type": file.type} : {}, await file.arrayBuffer());
+        return await Component.blob(file);
+    }
+
+    /**
+     * Create a Component from a {@link !Blob}. If blob media type is available,
+     * it will be set in the `Content-Type` header. The blob's contents will be used as the part's body.
+     *
+     * This method might be slow if a large file is provided as the blob contents need to be read.
+     *
+     * @param blob Blob to create the component from
+     */
+    public static async blob(blob: Blob) {
+        return new Component(blob.type.length > 0 ? {"Content-Type": blob.type} : {}, await blob.arrayBuffer());
     }
 
     public bytes(): Uint8Array {
@@ -67,4 +80,11 @@ export class Component implements Part {
         result.push(this.body);
         return Multipart.combineArrays(result);
     }
+
+    /**
+     * A Blob representation of this component. Headers will be lost.
+     */
+    public blob(): Blob {
+        return new Blob([this.body], {type: this.headers.get("Content-Type") ?? undefined});
+    }
 }

src/Multipart.ts

@@ -231,6 +231,19 @@ export class Multipart implements Part {
         return Multipart.parseBody(part.bytes(), new TextEncoder().encode(boundary), mediaType ?? void 0);
     }
 
+    /**
+     * Create Multipart from a {@link !Blob}. The boundary and media type are determined from the blob's type.
+     * @param blob The blob
+     * @throws {@link !SyntaxError} If the `Content-Type` header is missing or does not include a boundary
+     */
+    public static async blob(blob: Blob): Promise<Multipart> {
+        const type = blob.type;
+        if (type === "") throw new SyntaxError("Blob is missing Content-Type header");
+        const {mediaType, boundary} = Multipart.parseContentType(type);
+        if (boundary === null) throw new SyntaxError("Missing boundary in Content-Type header of blob");
+        return Multipart.parseBody(new Uint8Array(await blob.arrayBuffer()), new TextEncoder().encode(boundary), mediaType ?? void 0);
+    }
+
     /**
      * Create Multipart from {@link FormData}.
      * This method might be slow if the form data contains large files.
@@ -244,7 +257,7 @@ export class Multipart implements Part {
         for (const [key, value] of formData.entries()) {
             if (typeof value === "string") parts.push(new Component({"Content-Disposition": `form-data; name="${key}"`}, new TextEncoder().encode(value)));
             else {
-                const part = await Component.file(value);
+                const part = await Component.blob(value);
                 part.headers.set("Content-Disposition", `form-data; name="${key}"; filename="${value.name}"`);
                 parts.push(part);
             }
@@ -439,6 +452,16 @@ export class Multipart implements Part {
         return Multipart.combineArrays(result);
     }
 
+    /**
+     * Create Blob from this multipart.
+     *
+     * @throws {@link !RangeError} If the multipart boundary is invalid. A valid boundary is 1 to 70 characters long,
+     * does not end with space, and may only contain: A-Z a-z 0-9 '()+_,-./:=? and space.
+     */
+    public blob(): Blob {
+        return new Blob([this.bytes()], {type: this.headers.get("content-type") ?? undefined});
+    }
+
     private static boundaryShouldBeQuoted(boundary: Uint8Array): boolean {
         for (const byte of boundary) {
             if (

test/Component.test.js

@@ -1,5 +1,6 @@
 import {expect} from "chai";
 import {Multipart, Component} from "../dist/index.js";
+import {describe} from "mocha";
 
 describe("Component", () => {
 
@@ -78,6 +79,22 @@ describe("Component", () => {
         });
     });
 
+    describe("blob", () => {
+        it("should create Component from Blob with type", async () => {
+            const blob = new Blob([new Uint8Array([1, 2, 3])], {type: "text/plain"});
+            const component = await Component.blob(blob);
+            expect(component.headers.get("Content-Type")).to.equal("text/plain");
+            expect(component.body).to.deep.equal(new Uint8Array([1, 2, 3]));
+        });
+
+        it ("should create Component from Blob without type", async () => {
+            const blob = new Blob([new Uint8Array([1, 2, 3])]);
+            const component = await Component.blob(blob);
+            expect(component.headers.get("Content-Type")).to.equal(null);
+            expect(component.body).to.deep.equal(new Uint8Array([1, 2, 3]));
+        });
+    });
+
     describe("#bytes", () => {
         it("should return the bytes of a Component with headers and body", () => {
             const headersInit = {"Content-Type": "text/plain", "Content-Length": "3"};
@@ -96,4 +113,23 @@ describe("Component", () => {
             expect(new TextDecoder().decode(bytes)).to.equal(expected);
         });
     });
+
+    describe("#blob", () => {
+        it("should return the Blob of a Component with headers and body", async () => {
+            const headersInit = {"Content-Type": "text/plain", "Content-Length": "3"};
+            const body = new Uint8Array([1, 2, 3]);
+            const component = new Component(headersInit, body);
+            const blob = component.blob();
+            expect(blob.type).to.equal("text/plain");
+            expect(await blob.bytes()).to.deep.equal(body);
+        });
+
+        it("should return the Blob of a Component with only headers", async () => {
+            const headersInit = {"Content-Type": "text/plain", "Content-Length": "3"};
+            const component = new Component(headersInit);
+            const blob = component.blob();
+            expect(blob.type).to.equal("text/plain");
+            expect(await blob.bytes()).to.deep.equal(new Uint8Array(0));
+        });
+    });
 });

test/Multipart.test.js

@@ -1,10 +1,11 @@
-import { Multipart, Component} from "../dist/index.js";
-import { expect } from "chai";
+import {Multipart, Component} from "../dist/index.js";
+import {expect} from "chai";
+import {describe} from "mocha";
 
 describe("Multipart", function () {
     describe("constructor", function () {
         it("should initialize with default boundary and mediaType", function () {
-            const component = new Component({ "content-type": "text/plain" }, new TextEncoder().encode("foo bar"));
+            const component = new Component({"content-type": "text/plain"}, new TextEncoder().encode("foo bar"));
             const multipart = new Multipart([component]);
 
             expect(multipart.boundary).to.be.an.instanceof(Uint8Array);
@@ -14,7 +15,7 @@ describe("Multipart", function () {
         it("should accept a custom boundary and mediaType", function () {
             const boundary = "my-custom-boundary";
             const mediaType = "Multipart/form-data";
-            const component = new Component({ "x-foo": "bar" }, new TextEncoder().encode("custom content"));
+            const component = new Component({"x-foo": "bar"}, new TextEncoder().encode("custom content"));
             const multipart = new Multipart([component], boundary, mediaType);
 
             expect(new TextDecoder().decode(multipart.boundary)).to.equal(boundary);
@@ -32,8 +33,8 @@ describe("Multipart", function () {
     describe("parse", function () {
         it("should parse Multipart data correctly", function () {
             const boundary = "my-boundary";
-            const component1 = new Component({ "x-foo": "bar" }, new TextEncoder().encode("Component1 content"));
-            const component2 = new Component({ "content-type": "text/plain" }, new TextEncoder().encode("Component2 content"));
+            const component1 = new Component({"x-foo": "bar"}, new TextEncoder().encode("Component1 content"));
+            const component2 = new Component({"content-type": "text/plain"}, new TextEncoder().encode("Component2 content"));
             const multipart = new Multipart([component1, component2], boundary);
 
             const multipartBytes = multipart.bytes();
@@ -90,10 +91,10 @@ describe("Multipart", function () {
 
         it("should handle nested multiparts", function () {
             const components = [
-                new Component({ "x-foo": "bar" }, new TextEncoder().encode("foo bar")),
+                new Component({"x-foo": "bar"}, new TextEncoder().encode("foo bar")),
                 new Multipart([
-                    new Component({ "content-type": "text/plain" }, new TextEncoder().encode("nested Component 1")),
-                    new Component({ "content-type": "application/json" }, new TextEncoder().encode(JSON.stringify({ foo: "bar" })))
+                    new Component({"content-type": "text/plain"}, new TextEncoder().encode("nested Component 1")),
+                    new Component({"content-type": "application/json"}, new TextEncoder().encode(JSON.stringify({foo: "bar"})))
                 ], "inner-boundary")
             ];
             const multipart = new Multipart(components, "outer-boundary");
@@ -112,7 +113,7 @@ describe("Multipart", function () {
             expect(parsedInnerMultipart.parts[0].headers.get("content-type")).to.equal("text/plain");
             expect(new TextDecoder().decode(parsedInnerMultipart.parts[0].body)).to.equal("nested Component 1");
             expect(parsedInnerMultipart.parts[1].headers.get("content-type")).to.equal("application/json");
-            expect(new TextDecoder().decode(parsedInnerMultipart.parts[1].body)).to.equal(JSON.stringify({ foo: "bar" }));
+            expect(new TextDecoder().decode(parsedInnerMultipart.parts[1].body)).to.equal(JSON.stringify({foo: "bar"}));
         });
 
         it("should handle malformed Multipart data", function () {
@@ -217,6 +218,47 @@ describe("Multipart", function () {
         });
     });
 
+    describe("part", function () {
+        it("should create Multipart from Part", function () {
+            const multipart = new Multipart([
+                new Component({"content-type": "text/plain", "x-foo": "bar"}, new TextEncoder().encode("foo bar")),
+                new Component({}, new TextEncoder().encode("test content"))
+            ]);
+            const part = new Component({"Content-Type": multipart.headers.get("content-type")}, multipart.bytes());
+
+            const parsedMultipart = Multipart.part(part);
+            expect(parsedMultipart).to.be.an.instanceof(Multipart);
+            expect(parsedMultipart.parts.length).to.equal(2);
+            expect(parsedMultipart.parts[0].headers.get("content-type")).to.equal("text/plain");
+            expect(parsedMultipart.parts[0].headers.get("x-foo")).to.equal("bar");
+            expect(new TextDecoder().decode(parsedMultipart.parts[0].body)).to.equal("foo bar");
+            expect(parsedMultipart.parts[1].headers.get("content-type")).to.equal(null);
+            expect(new TextDecoder().decode(parsedMultipart.parts[1].body)).to.equal("test content");
+        });
+    });
+
+    describe("blob", async function () {
+        it("should create Multipart from Blob with type", async function () {
+            const boundary = "example-boundary";
+            const component1 = new Component({"x-foo": "bar"}, new TextEncoder().encode("Component1 content"));
+            const component2 = new Component({"content-type": "text/plain"}, new TextEncoder().encode("Component2 content"));
+            const multipart = new Multipart([component1, component2], boundary);
+
+            const blob = multipart.blob();
+            const parsedMultipart = await Multipart.blob(blob);
+
+            expect(parsedMultipart).to.be.an.instanceof(Multipart);
+            expect(new TextDecoder().decode(parsedMultipart.boundary)).to.equal(boundary);
+            expect(parsedMultipart.parts.length).to.equal(2);
+            const part1 = parsedMultipart.parts[0];
+            expect(part1.headers.get("x-foo")).to.equal("bar");
+            expect(part1.body).to.deep.equal(component1.body);
+            const part2 = parsedMultipart.parts[1];
+            expect(part2.headers.get("content-type")).to.equal("text/plain");
+            expect(part2.body).to.deep.equal(component2.body);
+        });
+    });
+
     describe("formData", function () {
         it("should correctly create Multipart from FormData", async function () {
             const formData = new FormData();
@@ -259,7 +301,7 @@ describe("Multipart", function () {
     });
 
     describe("#formData", function () {
-        it ("should correctly return the FormData of the Multipart", async function () {
+        it("should correctly return the FormData of the Multipart", async function () {
             const formData = new FormData();
             formData.append("foo", "bar");
             formData.append("bar", "baz");
@@ -278,7 +320,7 @@ describe("Multipart", function () {
             expect(new TextDecoder().decode(await file.arrayBuffer())).to.equal("console.log('hello world');");
         });
 
-        it("should handle empty FormData multipart", async function (){
+        it("should handle empty FormData multipart", async function () {
             const multipart = await Multipart.formData(new FormData());
             const formData = multipart.formData();
             expect(formData).to.be.an.instanceof(FormData);
@@ -289,7 +331,7 @@ describe("Multipart", function () {
     describe("#body", function () {
         it("should correctly return the body of the Multipart", function () {
             const boundary = "test-boundary";
-            const component = new Component({ "content-type": "text/plain" }, new TextEncoder().encode("test body"));
+            const component = new Component({"content-type": "text/plain"}, new TextEncoder().encode("test body"));
             const multipart = new Multipart([component], boundary);
 
             const body = multipart.body;
@@ -327,7 +369,7 @@ describe("Multipart", function () {
     describe("#bytes", function () {
         it("should correctly return the bytes of the Multipart", function () {
             const boundary = "test-boundary";
-            const component = new Component({ "x-foo": "bar" }, new TextEncoder().encode("test content"));
+            const component = new Component({"x-foo": "bar"}, new TextEncoder().encode("test content"));
             const multipart = new Multipart([component], boundary);
 
             const bytes = multipart.bytes();
@@ -365,6 +407,19 @@ describe("Multipart", function () {
         });
     });
 
+    describe("#blob", async function () {
+        it("should correctly return the blob of the Multipart", async function () {
+            const boundary = "test-boundary";
+            const component = new Component({"x-foo": "bar"}, new TextEncoder().encode("test content"));
+            const multipart = new Multipart([component], boundary);
+
+            const blob = multipart.blob();
+
+            expect(blob.type).to.equal(multipart.headers.get("content-type"));
+            expect(await blob.bytes()).to.deep.equal(multipart.bytes());
+        });
+    });
+
     describe("#headers", function () {
         it("should have the Content-Type boundary parameters in quotes as per RFC 2616", function () {
             expect(new Multipart([], "foobar", "multipart/mixed").headers.get("content-type")).to.equal("multipart/mixed; boundary=foobar");