`withValidator({ body })` rejects the multipart bodies that `useForm` and `action()` send for files

Abierto
  • ¿Algo no está bien?
#679 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
api, backend

Línea de trabajo

Start in runtime/validator.ts, where the body slot calls c.req.json(), and in objectToFormData() in pages/navigation-engine.ts, which encodes the multipart fields. The open design question is whether non-file values should be coerced in the schema or sent as one JSON part, so settle that before editing. Done means a multipart action with a File reaches the handler with a typed body and fills form.errors on schema failure, while JSON requests behave as before.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Summary

When the data holds a File, Blob or FileList, useForm and action() send it as multipart/form-data (hasFiles() → objectToFormData() in pages/navigation-engine.ts). withValidator({ body }) only calls c.req.json() (runtime/validator.ts), so it answers 400 {"error":"Invalid JSON body"} before the handler runs. Void's client and its validator don't agree on the body format.

The file uploads guide avoids this by skipping withValidator and calling c.req.parseBody(). That gives up what the validator gives every other action:

  • a typed body in the handler,
  • form.errors filled from the schema's issues,
  • useForm data typed from the schema (without a validator it falls back to Record<string, unknown>).
Reproduction
// pages/photos.server.ts
import { defineHandler } from 'void';
import { z } from 'zod';

export const action = defineHandler.withValidator({
  body: z.object({ title: z.string().min(1), photo: z.instanceof(File) }),
})(async (c, { body }) => {
  // never reached when a file is attached
});

// pages/photos.tsx: the upload form from the guide
const form = useForm('/photos', { title: '', photo: null as File | null });

Pick a file and submit. The client posts FormData, and the action answers 400 {"error":"Invalid JSON body"} without running the handler. form.errors stays {}, and form.error is a generic VoidActionError: Action failed with 400 Bad Request. With no file, the client sends JSON, and the validator fills form.errors as expected.

Proposal
  • Read form bodies in the body slot. For multipart/form-data and application/x-www-form-urlencoded, read the body with c.req.formData() instead of c.req.json(), and pass File values through to the schema.
  • Undo objectToFormData()'s encoding, so the schema sees the shape the client sent: a[b] back into nested objects, a[0] and a[] back into arrays. Otherwise a nested field arrives as a flat 'profile[name]' key.
  • Keep scalar types, or document that they're lost. The client sends booleans as '1'/'0', numbers as strings, null as '' and dates as ISO strings, so a schema written for the JSON body fails on the multipart one. Either document that the schema needs coercion, or have the client send the non-file values as one JSON part and only the files as separate parts, so the server can rebuild the exact object and one schema works for both encodings.
Prior art
  • Hono, which Void builds on: validator('form', …) validates parseBody() output, alongside validator('json', …).
  • Next.js: server actions receive FormData, files included, and libraries like Conform and zod-form-data validate it with a schema.
  • SvelteKit: Superforms validates request.formData(), files included, with the same schema as the client.
Workaround
// pages/photos.server.ts
import { defineHandler, ValidationError } from 'void/handler';
import { z } from 'zod';

const photoSchema = z.object({ title: z.string().min(1), photo: z.instanceof(File) });

export const action = defineHandler(async (c) => {
  const result = photoSchema.safeParse(await c.req.parseBody());
  if (!result.success) {
    throw new ValidationError(
      Object.fromEntries(result.error.issues.map((issue) => [issue.path.join('.'), issue.message])),
    );
  }
  // result.data is typed here, but useForm's data and errors aren't
});
Environment
  • void 1.5.0
  • @void/react 1.5.0
Lenguaje dominante
TypeScript
Estrellas
627
Forks
66
Merge medio
14 h 38 min
PR fusionados (30 d)
179

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de voidzero-dev/void

Todos los issues de voidzero-dev/void

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.