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

Ouverte
  • Quelque chose ne va pas ?
#679 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
35/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, typescript
Domaine
api, backend

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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
Langage dominant
TypeScript
Étoiles
627
Forks
66
Merge moyen
14 h 38 min
PR mergées (30 j)
179

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de voidzero-dev/void

Toutes les issues de voidzero-dev/void

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.