Validate File Name in File Upload For Optional Files

[jdgamble555]

I have a form with an optional image for a post. If the File Upload is left empty, it will still send this data:

File {
  size: 0,
  type: 'application/octet-stream',
  name: 'undefined',
  lastModified: 1702242880340
}

So in reality I need a way to check that name='undefined' respectively, or the file must be a of type jpeg. This is given that an invalid file could also be size=0.

Here is what I have:

const postSchema = object({
  ...
  image: union([
    instance(File, [mimeType(['image/jpeg'])]),
    instance(File, [size(0)])
  ]))
});

But I need some way to check that there is no file attached by checking the file name='undefined'.

J

[fabian-hiller]

You could use decode-formdate to decode your FormData to a JavaScript object that can be parsed with Valibot.

[fabian-hiller]

And name and type can be individually validated with custom in the pipeline of your instance schema.

[jdgamble555]

Ok thanks, I ended up going with this:

image: union([
    instance(File, [mimeType(['image/jpeg'])]),
    instance(File, [
        size(0),
        custom((file) => file.name === 'undefined', "Invalid File Type")
    ])
])

Just a note for anyone finding this that instead of importing an external package like decode-formdata, you can easily get the form data with:

const formData = Object.fromEntries(await request.formData());

I try to avoid external packages (or lack of tree shaking in case of Zod).

J

[fabian-hiller]

I am the author of decode-formdata. It is a 1 kB library that solves many more problems than Object.formEntries(...) can do. But if it works for you that way, there is of course no reason to use it.

For example, decode-formdata detects "empty" files, so your schema is much clearer:

image: optional(instance(File, [mimeType(['image/jpeg'])])),

[jdgamble555]

Ok nice, that solves my original problem!

[fabian-hiller]

Great! Similar to Valibot, decode-formdata has 100% test coverage and is actively maintained.