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 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!
Login to get access to the exclusive discord channel.
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 13 days ago
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    80 Β· 5 days ago
  • πŸ“forms
    Review - Professional Web Forms
    Baghira 🌌:
    So I finished the second workshop last week. I wnated to digest and let some timepast before I wante...
    • βœ…1
    1 Β· 2 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    Reviewing foundations, Mutations, Actions
    silvanet πŸš€ 🌌:
    Forgive me for this. I went over the file size limit. I don't want to sign up for being able to exce...
    • βœ…1
    2 Β· 6 months ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 3 months ago
  • πŸ’Ύdata
    πŸ“forms
    Getting a TS error that is not present in the course files
    OtterlyPunk:
    So I'm working in parallel and I'm feeling the problem is I'm using a new version of something in my...
    • βœ…2
    12 Β· 8 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· a year ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· a year ago
  • πŸ“forms
    Loading into disk
    DiogoVaz 🌌:
    I am going through the File Upload section and I completely understand the benefits of loading the a...
    • βœ…1
    2 Β· 4 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· 5 months ago
  • πŸ’Ύdata
    πŸ“forms
    πŸ”­foundations
    How can I do this?
    silvanet πŸš€ 🌌:
    Viewing the Intro (from the Workshop) for Mutations, the course has an embedded video where Kent exp...
    • βœ…1
    3 Β· 6 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· 6 months ago
  • πŸ“forms
    Unable to start the playground
    Payapula πŸš€ 🌌:
    Today morning I have updated the workshop for web-form - https://github.com/epicweb-dev/web-forms/co...
    • βœ…1
    16 Β· 7 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Native Logging
    trendaaang 🌌:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • βœ…1
    6 Β· 7 months ago
  • πŸ“forms
    File upload `unstable_parseMultipartFormData` vs `File`
    QzCurious 🌌:
    I'd like to ask why we want to use `unstable_parseMultipartFormData` at first place? It seems to me ...
    • βœ…1
    8 Β· 7 months ago
  • πŸ“forms
    Purpose of conform.fieldset() in the excercise
    blue_cat_blues 🌌 πŸš€:
    In the solution for Web forms 05/01 (complex structures/ nested objects) there is a call to `conform...
    • βœ…1
    4 Β· 7 months ago
  • πŸ“forms
    I think conform removed their docs for react
    Antonio πŸš€ 🌌:
    Hey I'm watching the Forms course and on /03/03 seems like the https://conform.guide/api/react link ...
    • βœ…1
    15 Β· 8 months ago
  • πŸ’Ύdata
    πŸ“forms
    Issues with child routes when loading a modal with actions (server/client)
    OtterlyPunk:
    I've set up a mini-project to go through the first set of videos and I'm having issues with the form...
    • βœ…1
    7 Β· 8 months ago
  • general
    The video play is pretty laggy currently
    QzCurious 🌌:
    I thought I should tag you for this <@105755735731781632>. Please take a look if something wrong.
    • βœ…2
    9 Β· 8 months ago
  • general
    New Workshop Scheduled
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    Hey Epic Web devs! I wanted to let you know before everyone else on here: https://www.epicweb.dev/ev...
    • 2
    0 Β· 8 months ago