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
    Epic stack using tanstack form
    wargha ๐Ÿš€ ๐ŸŒŒ:
    https://github.com/epicweb-dev/epic-stack/compare/epicweb-dev:main...wargha:feature/tanstack-form-ex...
    • โœ…1
    3 ยท 8 days ago
  • general
    Init command outdated on the EpicWeb website
    Virgile ๐Ÿ† ๐ŸŒŒ:
    Hi everyone. I've initialized a new epic-stack project yesterday. Following instructions from http...
    • โœ…1
    3 ยท 11 days ago
  • general
    Mark as complete, resets the first time you click it.
    Daniel V.C ๐Ÿš€ ๐ŸŒŒ:
    Not sure if anyone else has had this issue, as i've not seen anyone else talk about it, but I find ...
    • โœ…1
    8 ยท 17 days ago
  • general
    Keeping Epic Stack Projects Free on Fly โ€“ Any Tips?
    wargha ๐Ÿš€ ๐ŸŒŒ:
    Iโ€™ve been experimenting with the Epic Stack and deploying some dummy projects on Fly. I noticed that...
    • โœ…1
    0 ยท a month ago
  • general
    epic stack website initial load at home page is unstyled (sometimes)
    osmancakir ๐Ÿš€ ๐ŸŒŒ:
    Sometimes (especially when it is loaded first time on a new browser etc.) I see this unstyled versio...
    10 ยท 15 days 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 ยท a year ago
  • general
    Welcome to EpicWeb.dev! Say Hello ๐Ÿ‘‹
    Kent C. Dodds โ—† ๐Ÿš€๐Ÿ†๐ŸŒŒ:
    This is the first post of many hopefully!
    • 18
    81 ยท 2 years ago
  • ๐Ÿ“forms
    Schema Validation- Native HTML Validation?
    edpau ๐Ÿš€:
    I just finished Schema Validation, 03. Conform form utils, I disabled JavaScript, removed the conten...
    • โœ…1
    2 ยท 2 months ago
  • ๐Ÿ’พdata
    general
    ๐Ÿ“forms
    ๐Ÿ”ญfoundations
    Creating Notes
    Scott ๐ŸŒŒ ๐Ÿ†:
    Does anybody know in what workshop we create notes? I would like to see the routing structure. So fa...
    • โœ…1
    2 ยท 3 months ago
  • ๐Ÿ”ญfoundations
    ๐Ÿ’พdata
    general
    ๐Ÿ“forms
    ๐Ÿ”auth
    Thank you for the inspiration
    Binalfew ๐Ÿš€ ๐ŸŒŒ:
    <@105755735731781632> I wanted to thank you for the incredible knowledge I gained from your Epic Web...
    • โค๏ธ1
    1 ยท 3 months ago
  • 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 ยท 6 months 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 ยท 7 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 ยท a year 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 ยท 8 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 ยท a year 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 ยท 9 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 ยท 10 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 ยท a year 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 ยท a year ago