T
TanStack5mo ago
deep-jade

Validate FormData server action with input type="file"

Hello, I'm trying to validate input file on the server but the validation fails:
issues: [
{
kind: 'schema',
type: 'instance',
input: {},
expected: 'File',
received: 'Object',
message: 'Veuillez entrer un fichier valide',
requirement: undefined,
path: [Array],
issues: undefined,
lang: undefined,
abortEarly: undefined,
abortPipeEarly: undefined
}
]
issues: [
{
kind: 'schema',
type: 'instance',
input: {},
expected: 'File',
received: 'Object',
message: 'Veuillez entrer un fichier valide',
requirement: undefined,
path: [Array],
issues: undefined,
lang: undefined,
abortEarly: undefined,
abortPipeEarly: undefined
}
]
export const AddCompanySchema = v.object({
name: v.pipe(
v.string(),
v.nonEmpty("Veuillez entrer le nom de l'entreprise"),
v.maxLength(255, "Le nom de l'entreprise doit contenir au plus 255 caractères"),
),
siret: v.pipe(
v.string(),
v.nonEmpty("Veuillez entrer le siret de l'entreprise"),
v.maxLength(14, "Le siret de l'entreprise doit contenir 14 caractères"),
),
description: v.pipe(
v.string(),
v.maxLength(1500, "La description de l'entreprise doit contenir au plus 1500 caractères"),
),
categories: v.pipe(
v.array(v.string()),
v.minLength(1, "Veuillez sélectionner au moins une catégorie"),
v.maxLength(3, "Veuillez sélectionner au plus 3 catégories"),
),
logo: v.pipe(
v.instance(File, "Veuillez entrer un fichier valide"),
v.mimeType(["image/png", "image/jpeg", "image/jpg"], "Veuillez entrer un fichier valide"),
v.maxSize(1024 * 1024 * 3, "La taille du fichier doit être inférieure à 3MB"),
),
images: v.optional(
v.pipe(
v.array(v.file("Veuillez entrer un fichier valide")),
v.minLength(1, "Veuillez entrer au moins une image"),
v.maxLength(3, "Veuillez entrer au plus 3 images"),
),
),
});
export const AddCompanySchema = v.object({
name: v.pipe(
v.string(),
v.nonEmpty("Veuillez entrer le nom de l'entreprise"),
v.maxLength(255, "Le nom de l'entreprise doit contenir au plus 255 caractères"),
),
siret: v.pipe(
v.string(),
v.nonEmpty("Veuillez entrer le siret de l'entreprise"),
v.maxLength(14, "Le siret de l'entreprise doit contenir 14 caractères"),
),
description: v.pipe(
v.string(),
v.maxLength(1500, "La description de l'entreprise doit contenir au plus 1500 caractères"),
),
categories: v.pipe(
v.array(v.string()),
v.minLength(1, "Veuillez sélectionner au moins une catégorie"),
v.maxLength(3, "Veuillez sélectionner au plus 3 catégories"),
),
logo: v.pipe(
v.instance(File, "Veuillez entrer un fichier valide"),
v.mimeType(["image/png", "image/jpeg", "image/jpg"], "Veuillez entrer un fichier valide"),
v.maxSize(1024 * 1024 * 3, "La taille du fichier doit être inférieure à 3MB"),
),
images: v.optional(
v.pipe(
v.array(v.file("Veuillez entrer un fichier valide")),
v.minLength(1, "Veuillez entrer au moins une image"),
v.maxLength(3, "Veuillez entrer au plus 3 images"),
),
),
});
is it a normal behavior that server side its not a type File anymore ? client side validation does not trigger an error
5 Replies
deep-jade
deep-jadeOP5mo ago
ok so server side its an empty object :/
deep-jade
deep-jadeOP5mo ago
GitHub
FormData input type="file" returns an empty object in serverFn · I...
Which project does this relate to? Start Describe the bug Hello, trying to validate input file on the server but the validation fails because it returns an empty object issues: [ { kind: 'schem...
deep-jade
deep-jadeOP5mo ago
oups, actually it works if I send the formdata and use formdata.get() on serverFn 🙂 So I guess I should close the issue maybe ?
optimistic-gold
optimistic-gold5mo ago
npm
zod-form-data
Validation helpers for zod specifically for parsing FormData or URLSearchParams. This is particularly useful when using Remix and combos well with [remix-validated-form](https:. Latest version: 2.0.7, last published: a month ago. Start using zod-form-data in your proj...
deep-jade
deep-jadeOP5mo ago
GitHub
GitHub - fabian-hiller/decode-formdata: Decodes complex FormData in...
Decodes complex FormData into a JavaScript object. Contribute to fabian-hiller/decode-formdata development by creating an account on GitHub.

Did you find this page helpful?