File

A z.file() field stores the first selected File, or undefined when empty. The preview displays its name, size, and MIME type. It does not upload anything.

Usage

Use your form instance from useForm. See the initial setup.

const schema = z.object({
  attachment: z.file().max(5_000_000).optional(),
});

<ErlForm
  form={form}
  schema={schema}
/>

Use Zod .max() and .mime() to validate size and type. The demo allows an optional file up to 5,000,000 bytes.

Uploading to your API

In your useForm onSubmit callback, append the File to FormData:

onSubmit: async ({ value }) => {
  const body = new FormData();
  if (value.attachment) body.append("attachment", value.attachment);
  const response = await fetch("/api/attachment", { method: "POST", body });
  if (!response.ok) throw new Error("Upload failed");
}

Implement the endpoint in your application and validate again on the server. Do not serialize File with JSON.stringify.

The built-in file renderer in 1.0.0 does not forward accept or multiple and stores only one File. Use a custom component for file-picker filters or multiple files. Resetting form state does not necessarily clear the native file input; remount it when needed.