fix(form-data): support empty File

.changeset/lemon-nails-rhyme.md

@@ -0,0 +1,6 @@
+---
+"@web-std/form-data": patch
+---
+
+Fix submitting form data when file input is empty. Addresses https://github.com/remix-run/remix/pull/3576
+

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

@@ -234,7 +234,7 @@ const toEntryValue = (value, filename) => {
   } else if (isBlob(value)) {
     return new BlobFile([value], filename != null ? filename : "blob")
   } else {
-    if (filename != null) {
+    if (filename != null && filename != "") {
       throw new TypeError(
         "filename is only supported when value is Blob or File"
       )

packages/form-data/test/form-data.spec.js

@@ -89,6 +89,17 @@ export const test = test => {
     assert.equal(file2.lastModified, 123, "lastModified should be 123")
   })
 
+  // This mimics the payload sent by a browser when a file input
+  // exists but is not filled out.
+  test("filename on string contents", () => {
+    const formData = new FormData()
+    formData.set("file-3", new Blob([]), "")
+    const file3 = /** @type {File} */ (formData.get("file-3"))
+    assert.equal(file3.constructor.name, "File")
+    assert.equal(file3.name, "")
+    assert.equal(file3.type, "")
+  })
+
   test("throws on few args", () => {
     const data = new FormData()
     // @ts-expect-error
@@ -207,21 +218,21 @@ export const test = test => {
     assert.deepEqual([...data], [["n2", "v2"]])
   })
 
-  test("Shold return correct filename with File", () => {
+  test("Should return correct filename with File", () => {
     const data = new FormData()
     data.set("key", new File([], "doc.txt"))
     const file = /** @type {File} */ (data.get("key"))
     assert.equal("doc.txt", file.name)
   })
 
-  test("Shold return correct filename with Blob filename", () => {
+  test("Should return correct filename with Blob filename", () => {
     const data = new FormData()
     data.append("key", new Blob(), "doc.txt")
     const file = /** @type {File} */ (data.get("key"))
     assert.equal("doc.txt", file.name)
   })
 
-  test("Shold return correct filename with just Blob", () => {
+  test("Should return correct filename with just Blob", () => {
     const data = new FormData()
     data.append("key", new Blob())
     const file = /** @type {File} */ (data.get("key"))