handle file metadata in input fields

Author: Archmonger

src/js/packages/event-to-object/src/index.ts

@@ -168,7 +168,9 @@ function classToObject(x: any, maxDepth: number): object {
       const val = x[prop];
       if (!shouldIgnoreValue(val, prop, x)) {
         if (typeof val === "object") {
-          const converted = deepCloneClass(val, maxDepth);
+          // Ensure files have enough depth to be serialized
+          const propDepth = prop === "files" ? Math.max(maxDepth, 3) : maxDepth;
+          const converted = deepCloneClass(val, propDepth);
           if (converted !== maxDepthSignal) {
             result[prop] = converted;
           }
@@ -179,6 +181,35 @@ function classToObject(x: any, maxDepth: number): object {
     }
   }
 
+  // Explicitly include form elements if they exist and are not enumerable
+  const win = typeof window !== "undefined" ? window : undefined;
+  // @ts-ignore
+  const FormClass = win
+    ? win.HTMLFormElement
+    : typeof HTMLFormElement !== "undefined"
+      ? HTMLFormElement
+      : undefined;
+
+  if (FormClass && x instanceof FormClass && x.elements) {
+    for (let i = 0; i < x.elements.length; i++) {
+      const element = x.elements[i] as any;
+      if (
+        element.name &&
+        !Object.prototype.hasOwnProperty.call(result, element.name) &&
+        !shouldIgnoreValue(element, element.name, x)
+      ) {
+        if (typeof element === "object") {
+          const converted = deepCloneClass(element, maxDepth);
+          if (converted !== maxDepthSignal) {
+            result[element.name] = converted;
+          }
+        } else {
+          result[element.name] = element;
+        }
+      }
+    }
+  }
+
   return result;
 }
 

src/js/packages/event-to-object/tests/event-to-object.test.ts

@@ -521,3 +521,86 @@ test("includes checked property for checkboxes", () => {
     },
   });
 });
+
+test("converts file input with files", () => {
+  const input = window.document.createElement("input");
+  input.type = "file";
+
+  // Create a mock file
+  const file = new window.File(["content"], "test.txt", {
+    type: "text/plain",
+    lastModified: 1234567890,
+  });
+
+  // Mock the files property
+  const mockFileList = {
+    0: file,
+    length: 1,
+    item: (index: number) => (index === 0 ? file : null),
+    [Symbol.iterator]: function* () {
+      yield file;
+    },
+  };
+
+  Object.defineProperty(input, "files", {
+    value: mockFileList,
+    writable: true,
+  });
+
+  const event = new window.Event("change");
+  Object.defineProperty(event, "target", {
+    value: input,
+    enumerable: true,
+    writable: true,
+  });
+
+  const converted: any = convert(event);
+
+  expect(converted.target.files).toBeDefined();
+  expect(converted.target.files.length).toBe(1);
+  expect(converted.target.files[0].name).toBe("test.txt");
+});
+
+test("converts form submission with file input", () => {
+  const form = window.document.createElement("form");
+  const input = window.document.createElement("input");
+  input.type = "file";
+  input.name = "myFile";
+
+  // Create a mock file
+  const file = new window.File(["content"], "test.txt", {
+    type: "text/plain",
+    lastModified: 1234567890,
+  });
+
+  // Mock the files property
+  const mockFileList = {
+    0: file,
+    length: 1,
+    item: (index: number) => (index === 0 ? file : null),
+    [Symbol.iterator]: function* () {
+      yield file;
+    },
+  };
+
+  Object.defineProperty(input, "files", {
+    value: mockFileList,
+    writable: true,
+  });
+
+  form.appendChild(input);
+
+  const event = new window.Event("submit");
+  Object.defineProperty(event, "target", {
+    value: form,
+    enumerable: true,
+    writable: true,
+  });
+
+  const converted: any = convert(event);
+
+  expect(converted.target.myFile).toBeDefined();
+  expect(converted.target.myFile.files).toBeDefined();
+  expect(converted.target.myFile.files.length).toBe(1);
+  expect(converted.target.myFile.files[0].name).toBe("test.txt");
+});