How to handle FileList (i.e. input that allows selecting multiple files)?

[kimmobrunfeldt]

There was a discussion about handling single file uploads, but how about multiple?

I modified the single upload code example to show the issue I'm having with FileList: https://codesandbox.io/s/kind-babbage-8oy4ln?file=/src/App.tsx

name={zorm.fields.images()} fails to:

(property) images: FieldChain<{
    [x: number]: File;
    readonly length: number;
    item: {};
}>
This expression is not callable.
  Type 'FieldChain<{ [x: number]: File; readonly length: number; item: {}; }>' has no call signatures.ts(2349)

Didn't spot it from the docs but is there a concept of array name without explicitly defining the index? For example fieldName[]. That's the recommended way to name a multi-file input: https://stackoverflow.com/questions/1593225/how-to-select-multiple-files-with-input-type-file

[esamattis]

This is a missing feature atm.

It's bit tricky to support (but possible).

First of all React Zorm only uses FormData for parsing and it cannot see the actual form because only the FormData object is visible on server-side with tools like Remix and CloudFlare Workers. FileList is only part of the form in HTMLFormElement#files which means we cannot use z.instanceof(FileList).

Ideally we would support z.array(z.instanceof(file)) because FormData#getAll() returns an array of File objects for file inputs with multiple attribute. Unfortunately this is ambiguous. There's is no way of telling whether the user means <input file="file" multiple> or just multiple single file inputs.

To support this I think we need to add custom a custom type to make it unambiguous. Ex. something like:

import { MultipleFiles } from "react-zorm";

const FormSchema = z.object({
    files: z.instanceof(MultipleFiles)
});

And use that as a parsing hint.