Describe the bug
If you have a form (enhanced or otherwise) that includes a File field (i.e. input[type=file]), if you do not select the file, instead of omitting the field on submission, the field is still included in the submission as undefined. That causes issues with validation libraries that treat optional and undefinable keys differently, for example, ArkType.
Reproduction
https://stackblitz.com/edit/arktype-form-validation-bug?file=src%2Froutes%2F%2Bpage.svelte
Simply, go to the link above and press both "Submit" buttons without selecting files.
Expected:
- Both form submissions should succeed and log
{} on the server.
Actual:
- The ArkType form submission fails as
file is present but given undefined as a value.
- The Valibot form submission succeeds, but it logs
{ file: undefined } when it should be an empty object.
Logs
System Info
System:
OS: Windows 11 10.0.26200
CPU: (28) x64 Intel(R) Core(TM) i7-14700K
Memory: 40.85 GB / 63.70 GB
Binaries:
Node: 24.16.0 - C:\Program Files\nodejs\node.EXE
npm: 11.7.0 - ~\AppData\Roaming\npm\npm.CMD
bun: 1.3.14 - ~\.bun\bin\bun.EXE
Browsers:
Edge: Chromium (140.0.3485.81)
Internet Explorer: 11.0.26100.8115
npmPackages:
@sveltejs/adapter-node: 5.5.4 => 5.5.4
@sveltejs/kit: 2.60.1 => 2.60.1
@sveltejs/vite-plugin-svelte: 7.1.2 => 7.1.2
svelte: 5.55.9 => 5.55.9
vite: 8.0.14 => 8.0.14
Severity
serious, but I can work around it
Additional Information
I chose "serious, but I can work around it" here because it prevents the usage of ArkType in similar cases and could likely cause other issues due to the unexpected object shape. The workaround is to do validation manually.
Also, I cannot, for example, use this:
const MyArkTypeFormDataSchema = type({
"file?": "File | undefined"
})
As that causes the form to complain with errors like:
Types of property 'input' are incompatible.
Type '{ file?: File | undefined; }' is not assignable to type 'RemoteFormInput'.
Property '"file?"' is incompatible with index signature.
Type 'File | undefined' is not assignable to type 'MaybeArray<string | number | boolean | File | RemoteFormInput>'.
Type 'undefined' is not assignable to type 'MaybeArray<string | number | boolean | File | RemoteFormInput>'.ts(2769)
Describe the bug
If you have a
form(enhanced or otherwise) that includes aFilefield (i.e.input[type=file]), if you do not select the file, instead of omitting the field on submission, the field is still included in the submission asundefined. That causes issues with validation libraries that treat optional and undefinable keys differently, for example, ArkType.Reproduction
https://stackblitz.com/edit/arktype-form-validation-bug?file=src%2Froutes%2F%2Bpage.svelte
Simply, go to the link above and press both "Submit" buttons without selecting files.
Expected:
{}on the server.Actual:
fileis present but givenundefinedas a value.{ file: undefined }when it should be an empty object.Logs
System Info
System: OS: Windows 11 10.0.26200 CPU: (28) x64 Intel(R) Core(TM) i7-14700K Memory: 40.85 GB / 63.70 GB Binaries: Node: 24.16.0 - C:\Program Files\nodejs\node.EXE npm: 11.7.0 - ~\AppData\Roaming\npm\npm.CMD bun: 1.3.14 - ~\.bun\bin\bun.EXE Browsers: Edge: Chromium (140.0.3485.81) Internet Explorer: 11.0.26100.8115 npmPackages: @sveltejs/adapter-node: 5.5.4 => 5.5.4 @sveltejs/kit: 2.60.1 => 2.60.1 @sveltejs/vite-plugin-svelte: 7.1.2 => 7.1.2 svelte: 5.55.9 => 5.55.9 vite: 8.0.14 => 8.0.14Severity
serious, but I can work around it
Additional Information
I chose "serious, but I can work around it" here because it prevents the usage of
ArkTypein similar cases and could likely cause other issues due to the unexpected object shape. The workaround is to do validation manually.Also, I cannot, for example, use this:
As that causes the
formto complain with errors like: