@remix-run/form-data-middleware 0.2.2 → 0.3.0

package/README.md

@@ -1,11 +1,11 @@
 # form-data-middleware
 
-Form body parsing middleware for Remix. It parses incoming [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and exposes it via `context.get(FormData)`.
+Form body parsing middleware for Remix. It parses incoming [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and exposes it via `context.formData` (or `context.get(FormData)`).
 
 ## Features
 
 - **Request Form Parsing** - Parses request body form data once per request
-- **File Access** - Uploaded files are available from `context.get(FormData)`
+- **File Access** - Uploaded files are available from `context.formData` (or `context.get(FormData)`)
 - **Custom Upload Handling** - Supports pluggable upload handlers for file processing
 - **Error Control** - Optional suppression for malformed form data
 
@@ -17,20 +17,22 @@ npm i remix
 
 ## Usage
 
-Use the `formData()` middleware at the router level to parse `FormData` from the request body and make it available on request context via `context.get(FormData)`.
+Use the `formData()` middleware at the router level to parse `FormData` from the request body and make it available as `context.formData` (or `context.get(FormData)`).
+
+When `formData()` runs successfully it always provides a `FormData` value. Requests that do not contain a form body, including `GET` and `HEAD` requests, receive an empty `FormData`.
 
 Uploaded files are available in the parsed `FormData` object. For a single file field, use `formData.get(name)`. For repeated file fields, use `formData.getAll(name)`.
 
 ```ts
-import { createRouter } from 'remix/fetch-router'
-import { formData } from 'remix/form-data-middleware'
+import { createRouter } from 'remix/router'
+import { formData } from 'remix/middleware/form-data'
 
 let router = createRouter({
   middleware: [formData()],
 })
 
 router.post('/users', async (context) => {
-  let formData = context.get(FormData)
+  let formData = context.formData
   let name = formData.get('name')
   let email = formData.get('email')
 
@@ -41,12 +43,14 @@ router.post('/users', async (context) => {
 })
 ```
 
+Use `context.formData` (or `context.get(FormData)`).
+
 ### Custom File Upload Handler
 
 You can use a custom upload handler to customize how file uploads are handled. The return value of the upload handler will be used as the value of the form field in the `FormData` object.
 
 ```ts
-import { formData } from 'remix/form-data-middleware'
+import { formData } from 'remix/middleware/form-data'
 import { writeFile } from 'node:fs/promises'
 
 let router = createRouter({
@@ -83,7 +87,7 @@ let router = createRouter({
 
 ### Suppress Parse Errors
 
-Some requests may contain invalid form data that cannot be parsed. You can suppress those malformed-body parse errors by setting `suppressErrors` to `true`. In these cases, `context.get(FormData)` will be an empty `FormData` object. Multipart limit violations from `maxHeaderSize`, `maxFiles`, `maxFileSize`, `maxParts`, or `maxTotalSize` are never suppressed.
+Some requests may contain invalid form data that cannot be parsed. You can suppress those malformed-body parse errors by setting `suppressErrors` to `true`. In these cases, `context.formData` will be an empty `FormData` object. Multipart limit violations from `maxHeaderSize`, `maxFiles`, `maxFileSize`, `maxParts`, or `maxTotalSize` are never suppressed.
 
 ```ts
 let router = createRouter({

package/dist/lib/form-data.d.ts

@@ -1,6 +1,5 @@
 import { type FileUploadHandler, type ParseFormDataOptions } from '@remix-run/form-data-parser';
 import type { Middleware } from '@remix-run/fetch-router';
-type SetFormDataContextTransform = readonly [readonly [typeof FormData, FormData]];
 /**
  * Options for the {@link formData} middleware.
  */
@@ -25,6 +24,9 @@ export interface FormDataOptions extends ParseFormDataOptions {
  * @param options Options for parsing form data
  * @returns A middleware function that parses form data
  */
-export declare function formData(options?: FormDataOptions): Middleware<any, any, SetFormDataContextTransform>;
-export {};
+export declare function formData(options?: FormDataOptions): Middleware<{
+    key: typeof FormData;
+    value: FormData;
+    property: 'formData';
+}>;
 //# sourceMappingURL=form-data.d.ts.map

package/dist/lib/form-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-data.d.ts","sourceRoot":"","sources":["../../src/lib/form-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD,KAAK,2BAA2B,GAAG,SAAS,CAAC,SAAS,CAAC,OAAO,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAA;AAYlF;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,OAAO,CAAC,EAAE,eAAe,GACxB,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,2BAA2B,CAAC,CAiCnD"}
+{"version":3,"file":"form-data.d.ts","sourceRoot":"","sources":["../../src/lib/form-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAYzD;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,oBAAoB;IAC3D;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB;;;;OAIG;IACH,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,OAAO,CAAC,EAAE,eAAe,GACxB,UAAU,CAAC;IAAE,GAAG,EAAE,OAAO,QAAQ,CAAC;IAAC,KAAK,EAAE,QAAQ,CAAC;IAAC,QAAQ,EAAE,UAAU,CAAA;CAAE,CAAC,CAyC7E"}

package/dist/lib/form-data.js

@@ -17,26 +17,33 @@ export function formData(options) {
     let uploadHandler = options?.uploadHandler;
     return async (context) => {
         if (context.has(FormData)) {
+            let formData = context.get(FormData);
+            if (formData != null) {
+                context.set(FormData, formData, { property: 'formData' });
+            }
             return;
         }
         if (context.method === 'GET' || context.method === 'HEAD') {
+            context.set(FormData, new FormData(), { property: 'formData' });
             return;
         }
         let contentType = context.headers.get('Content-Type');
         if (contentType == null ||
             (!contentType.startsWith('multipart/') &&
                 !contentType.startsWith('application/x-www-form-urlencoded'))) {
-            context.set(FormData, new FormData());
+            context.set(FormData, new FormData(), { property: 'formData' });
             return;
         }
         try {
-            context.set(FormData, await parseFormData(context.request, options, uploadHandler));
+            context.set(FormData, await parseFormData(context.request, options, uploadHandler), {
+                property: 'formData',
+            });
         }
         catch (error) {
             if (!suppressErrors || isMultipartLimitError(error)) {
                 throw error;
             }
-            context.set(FormData, new FormData());
+            context.set(FormData, new FormData(), { property: 'formData' });
         }
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/form-data-middleware",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Middleware for parsing FormData from request bodies",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -28,14 +28,14 @@
   "devDependencies": {
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
-    "@remix-run/form-data-parser": "0.17.0",
-    "@remix-run/fetch-router": "0.18.1",
-    "@remix-run/assert": "0.1.0",
-    "@remix-run/test": "0.2.0"
+    "@remix-run/form-data-parser": "0.17.1",
+    "@remix-run/test": "0.4.0",
+    "@remix-run/assert": "0.2.0",
+    "@remix-run/fetch-router": "0.19.0"
   },
   "dependencies": {
-    "@remix-run/fetch-router": "^0.18.1",
-    "@remix-run/form-data-parser": "^0.17.0"
+    "@remix-run/fetch-router": "^0.19.0",
+    "@remix-run/form-data-parser": "^0.17.1"
   },
   "keywords": [
     "fetch",

package/src/lib/form-data.ts

@@ -10,8 +10,6 @@ import {
 } from '@remix-run/form-data-parser'
 import type { Middleware } from '@remix-run/fetch-router'
 
-type SetFormDataContextTransform = readonly [readonly [typeof FormData, FormData]]
-
 function isMultipartLimitError(error: unknown): boolean {
   return (
     error instanceof MaxFilesExceededError ||
@@ -49,16 +47,22 @@ export interface FormDataOptions extends ParseFormDataOptions {
  */
 export function formData(
   options?: FormDataOptions,
-): Middleware<any, any, SetFormDataContextTransform> {
+): Middleware<{ key: typeof FormData; value: FormData; property: 'formData' }> {
   let suppressErrors = options?.suppressErrors ?? false
   let uploadHandler = options?.uploadHandler
 
   return async (context) => {
     if (context.has(FormData)) {
+      let formData = context.get(FormData)
+      if (formData != null) {
+        context.set(FormData, formData, { property: 'formData' })
+      }
+
       return
     }
 
     if (context.method === 'GET' || context.method === 'HEAD') {
+      context.set(FormData, new FormData(), { property: 'formData' })
       return
     }
 
@@ -68,18 +72,20 @@ export function formData(
       (!contentType.startsWith('multipart/') &&
         !contentType.startsWith('application/x-www-form-urlencoded'))
     ) {
-      context.set(FormData, new FormData())
+      context.set(FormData, new FormData(), { property: 'formData' })
       return
     }
 
     try {
-      context.set(FormData, await parseFormData(context.request, options, uploadHandler))
+      context.set(FormData, await parseFormData(context.request, options, uploadHandler), {
+        property: 'formData',
+      })
     } catch (error) {
       if (!suppressErrors || isMultipartLimitError(error)) {
         throw error
       }
 
-      context.set(FormData, new FormData())
+      context.set(FormData, new FormData(), { property: 'formData' })
     }
   }
 }