File Validation

🦺 I'm not too pleased with the fact that we're just ignoring TypeScript. Remember:

TypeScript isn't making your life worse. It's just showing you how bad your life already is.
– me

Currently, users could upload whatever they want to our server and we don't validate anything at all, so it could lead to pretty broken experiences.

We've already got Zod setup in this form, we just need to add support for the imageId, file, and altText fields.

To help you with the Zod schema, you may checkout the Conform docs on File Uploads. Here's a snippet from that example:

const schema = z.object({
	profile: z.instanceof(File, { message: 'Profile is required' }),
})

In our case, the file is optional since the user may just be updating an existing file. But we do want to warn the user if they're going to try and upload a file that's too large, so for our refine call, we can just check that the file.size isn't too big.

Note: The File class is a browser API and not typically available in Node.js. However Remix polyfills this for us (check out

index.js

where we use installGlobals from Remix).

We'll get to actually displaying errors later on.

If you're trying to submit the form and nothing is happening, it could be an error that's preventing the form from submitting. But you'll not see the errors until we add those. Until then, you can comment out the onValidate function to prevent client-side validation and check out errors in the network tab.

With that, you should be good to go on this one!

04. File Upload/02. File Validation (💪 problem)

File Validation