fix: handle multipart/form-data submissions

.changeset/brave-shirts-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+fix: properly handle `<Form encType="multipart/form-data">` submissions (#8984)

packages/router/__tests__/router-test.ts

@@ -3868,7 +3868,7 @@ describe("a router", () => {
       expect(request.url).toBe("http://localhost/tasks");
       expect(request.method).toBe("POST");
       expect(request.headers.get("Content-Type")).toBe(
-        "application/x-www-form-urlencoded"
+        "application/x-www-form-urlencoded;charset=UTF-8"
       );
       expect((await request.formData()).get("query")).toBe("params");
     });
@@ -3901,10 +3901,44 @@ describe("a router", () => {
       expect(request.url).toBe("http://localhost/tasks?foo=bar");
       expect(request.method).toBe("POST");
       expect(request.headers.get("Content-Type")).toBe(
-        "application/x-www-form-urlencoded"
+        "application/x-www-form-urlencoded;charset=UTF-8"
       );
       expect((await request.formData()).get("query")).toBe("params");
     });
+
+    it("handles multipart/form-data submissions", async () => {
+      let t = setup({
+        routes: [
+          {
+            id: "root",
+            path: "/",
+            action: true,
+          },
+        ],
+        initialEntries: ["/"],
+        hydrationData: {
+          loaderData: {
+            root: "ROOT_DATA",
+          },
+        },
+      });
+
+      let fd = new FormData();
+      fd.append("key", "value");
+      fd.append("file", new Blob(["1", "2", "3"]), "file.txt");
+
+      let A = await t.navigate("/", {
+        formMethod: "post",
+        formEncType: "multipart/form-data",
+        formData: fd,
+      });
+
+      expect(
+        A.actions.root.stub.mock.calls[0][0].request.headers.get("Content-Type")
+      ).toMatch(
+        /^multipart\/form-data; boundary=NodeFetchFormDataBoundary[a-z0-9]+/
+      );
+    });
   });
 
   describe("scroll restoration", () => {

packages/router/router.ts

@@ -1846,11 +1846,9 @@ function createRequest(
     }
   }
 
+  // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
   return new Request(url, {
     method: formMethod.toUpperCase(),
-    headers: {
-      "Content-Type": formEncType,
-    },
     body,
   });
 }

packages/router/utils.ts

@@ -3,7 +3,9 @@ import { parsePath } from "./history";
 import { DataResult, DataRouteMatch } from "./router";
 
 export type FormMethod = "get" | "post" | "put" | "patch" | "delete";
-export type FormEncType = "application/x-www-form-urlencoded";
+export type FormEncType =
+  | "application/x-www-form-urlencoded"
+  | "multipart/form-data";
 
 /**
  * @private