How to handle zfd.repeatableOfType with other zfd. preprocessors

[RobertGemmaJr]

I've been having a lot of trouble combining zfd.repeatableOfType with some of the zfd preprocessors - in my case zfd.file.

Consider my schemas:

/**
 * Validates a single File.
 * NOTE @RobertGemmaJr: All files are an instance of the `File` class on the client
 * NOTE @RobertGemmaJr: All files are an instance of the `NodeOnDiskFile` class on the server
 * @param fieldName The name of the field.
 * @param options.optional Whether or not the file is optional
 * @returns
 */
export const FileSchema = <T extends boolean = false>(
  fieldName: string,
  options: { optional?: T } = { optional: false as T }
) => {
  const base = onClient()
    ? z.instanceof(File, { message: `${fieldName} is required` })
    : z.instanceof(NodeOnDiskFile, { message: `${fieldName} is required` });
  return zfd.file(
    (options.optional === true ? base.optional() : base) as T extends true
      ? z.ZodType<File | NodeOnDiskFile | undefined>
      : z.ZodType<File | NodeOnDiskFile>
  );
};

/**
 * Validates one or more files.
 * @param fieldName The name of the field.
 * @param options.optional Whether or not the file is optional
 * @returns
 */
export const MultiFileSchema = <T extends boolean = false, U extends boolean = false>(
  fieldName: string,
  options: { optional?: T; multiple?: U } = { optional: false as T, multiple: false as U }
) => zfd.repeatableOfType(FileSchema(fieldName, options));

That builds the following schema and form component:

const FORM_ID = "upload-files-form";
export const UPLOAD_FILES_BASE_SCHEMA = zfd.formData({
  files: MultiFileSchema("files"),
  comment: TextSchema("Comment").optional(),
  studyUidOrUrl: TextSchema(),
});

/** A modal containing a form for uploading multiple files to the server */
export default function UploadFilesForm({ trials, metadataSchema }: UploadFilesFormProps) {
  const { uploadFiles } = useUploadWorkerContext();
  const navigate = useNavigate();
  const [submitted, setSubmitted] = useState(false);
  const isSubmitting = useIsSubmitting(FORM_ID);

  const params = useParams();
  const studyUidOrUrl = params.study_id;

  const schema = UPLOAD_FILES_BASE_SCHEMA;
  const keys = schema.innerType().keyof().Enum;
  const validator = withZod(schema);

  // Always navigate up a route when submission completes
   useEffect(() => {
     if (submitted && !isSubmitting) navigate("..");
   }, [submitted, isSubmitting, navigate]);

  return (
    <Modal header={<Title>Upload File</Title>} isOpen={true} onClose={() => navigate("..")}>
      <Form
        id={FORM_ID}
        isStack={true}
        validator={validator}
        encType="multipart/form-data"
        onSubmit={async (formData, event) => {
          event.preventDefault();
          uploadFiles(formData as z.infer<typeof schema>);
          setSubmitted(true);
        }}
      >
        <ControlledFile name={`${keys.files}`} label="New study file(s)" multiple={true} />
        <ControlledInput name={keys.comment} label="Comment" />
        <ControlledInput name={keys.studyUidOrUrl} value={studyUidOrUrl} hidden />
        <SubmitButton>Upload</SubmitButton>
      </Form>
    </Modal>
  );
}

My issue is that I cannot correctly target my ControlledFile component for validation errors. In order to pass the files through the schema I need it's name to be ${keys.files}. However, when no file has been selected, the validation error does not appear on my UI.

I've been able to determine that the validation error is being sent to ${keys.files}[0]. I'm assuming the issue is that my FileSchema is (correctly) preprocessing and validating the empty file to undefined and, because it's undefined, returning that validation error. My only guess form here is that zfd.repeatableOfType is fielding the error from the "first" instance of FileSchema and thus passing the validation error's name as ${keys.files}[0]?

Is there any way to get around this behavior? Or a way to pass validation errors to an "extra" field for any given input?