Add file upload to edit page for user-friendly image & file attachments. Handle uploads in Remix, enforcing size limits. 

Integrate image upload with form data and memory handling. Use image chooser, manage existing images, set encoding, size limit, and specify alt text. 

Image Upload with Form Data and Memory Upload Handling

[00:00] Let's open up the edit route and here in action, we're going to handle the file upload. But let's do the UI side of this first. I think that'll make it all make a little bit more sense. So we have this new component called the image chooser. This was built for us by Kelly.

[00:17] You can feel free to dive into how all of this works, but it's pretty cool. It just handles all of the styling stuff. So you don't have to worry about doing this and also previewing the image and stuff like this. All of that has nothing to do with file upload itself. It's all just UI stuff. So feel free to dive into that if you so choose.

[00:36] So let's use this image chooser right here, image chooser. We're going to pass the notes first image as image props. So this is for when you're editing a note that already has an image. So we've got the image prop and that'll be data.note.images. We'll just do the first one.

[00:55] In the future, you'll be able to add multiple images. And so that's why the data model is set up to handle multiple images. But for now, we're just going to do the one. All right, so now inside the image chooser, we need to make a couple of adjustments. So first of all, if there's an existing image,

[01:11] we need to communicate to the backend that, hey, there's already an image here. We're editing the alt text for it or something like that. And so you need to provide that image, the image ID, so that the backend knows what image ID to associate with the existing image.

[01:29] So the way that we're going to do that is we're going to say, if there is an existing image, then we're going to render something. Otherwise, render null. We're going to render our input. That is a type hidden. And the name will be our image ID.

[01:48] And the value will be the image.id. So that existing image is coming based on whether or not an image has been provided. So the way that flows is if the data.node.images exists, then we're going to have an existing image. And in that case, our preview image will be set to the resource route

[02:07] for displaying the image. And that way, it displays all nice and everything. And then we have this hidden input that is there to communicate to the backend that, yes, indeed, there is an existing image. OK, great. So then we come down here. This is our input for choosing a new image.

[02:23] So we can either change the existing image or upload a brand new one. And it has some logic for the preview and stuff, which is interesting. But we're going to add a name of the file here. So a name will be file.

[02:38] And so this is the form data name value for our particular file. The type is file, so it's a file chooser. And then we're also going to add accept image. So we're going to accept any image. This is mostly for progressive enhancement stuff.

[02:55] This is not necessarily going to validate or anything like that. You have to do validation on the backend. But this will make the experience a little bit better by saying, hey, whatever file chooser you pop up, I'm looking for images for this. That's the intent here.

[03:14] OK, and then finally, for our text area, we're going to add a name of alt text so that on the backend, we have access to that. So if I save that, here we get our image chooser. I can choose an image. I can type in my alt text. And then if I submit that, let's take a look

[03:30] at what that does when we submit right here. There's our network request. Now, nothing actually happened. We haven't implemented the backend piece of it yet. But let's take a look at this payload right here. So it is a form data object. We have our title content and our file. The file is just a string.

[03:50] It's represented by the string. That doesn't seem right, right? We need to actually upload some binary data or some multi-part form data. Yeah, we can't upload the form data as query string parameters. We need to upload the form data with the binary file.

[04:07] So there is a change we need to make in our form. Right here, it needs to specify the encoding type of multi-part form data. And with that change, it is going to be a little different. So let's select another image here, Cuddling Koalas. And then we hit Submit.

[04:26] And now this will be a little different. So let's go to that post request that was made. And here we have form data, title content, and file represented as binary now. That's exactly what we want. We're going to stream this file to our action, to our server backend. And then we need to somehow take the chunk.

[04:46] So it's not going to send it all at once. Sometimes these files can be multiple gigabytes. So it's going to be streaming it in as chunks, bits at a time. And we're going to load that up. And we've got a couple of options of things we can do. So as that stream is coming in, we could stream it off to another service that's going to be storing our files for us. That's pretty common.

[05:05] Or we can stream it down into the file system, also pretty common. Or we just chunk it up into memory. So if we're going to make sure that they don't fill up our memory with something too big, we can do a little validation and say, hey, we're going to limit you to a certain amount of file size. So if we can do that validation, then we can just stick it into memory.

[05:24] And then we can do whatever we want to with it. We can put it into a database, or we can save it to a file, or whatever. Most of the time, if you're going to accept bigger files, more than a couple megabytes, then you probably want to stream it to someplace and not let it just hang out in memory. But because we're going to add a little validation, it's fine.

[05:42] We can have it stream or chunk up into memory. And then we can deal with it from there. So that's what we're going to do to make all this work. So starting here, we're going to switch this for parse multiple part form data. So let's actually, we need to import this first

[06:02] because this is an unstable API. So let's get that unstable parse multiple part form data. And that's coming from remix run node. But I personally don't like having unstable in my code. And so I just alias it. Is that bad of me? I don't think so. I think it's fine.

[06:18] But yeah, so we've got our multi-part form data parser. And to that, we pass the request itself. And then we can also pass some arguments for the file upload handler. So as those different pieces of the form data

[06:37] are being passed or supplied to our parser, it's going to be passed into an upload handler. And that is, for us, our memory upload handler. So we're going to use create memory upload handler.

[06:54] Again, that one also is stable or unstable for now. It'll be stable eventually. It hasn't experienced any changes in a while. The remix team will get to it eventually. I don't expect this to change. And if it does change, then I will add a note to the instructions and you can follow those changes. But like I said, I don't expect that to change. Okay, great.

[07:13] So with that, we can pass an option. This will be max part size. And we want to limit it to three megabytes. And so that's what we're going to do right there. We just set that to three megabytes in size. And that is an async experience. So we're going to await that.

[07:30] And then we get our form data from this. So there we go. Great, so we've got our form data. Everything else works as it did before. And we'll take care of adding this to our Zod schema a little bit later, because already this step of the exercise is getting kind of long. So just to wrap it up

[07:50] so we can have something deliverable that we can ship, we're going to add an images array. And we're going to pass an object that has an ID. So this will be form data dot get image ID. So you'll recall down here, we have that hidden input. So this way you can change an existing image.

[08:09] So if the image ID is there, then it will be there. And then we'll have our file that will be get the file. So the create memory upload handler will take that streamed multipart form data piece, and it will turn it into a buffer

[08:26] or into a file object actually that has a buffer. And then we can deal with it that way. So ourselves with this update note that handles all that stuff. When we get to the database modeling stuff, we'll look at more carefully at how to handle these uploads into an actual database. But for now, we're just,

[08:46] this is a little bit of an abstraction. Feel free to dive into it if you prefer. But yeah, so we're going to get that file. And then we're going to, yeah, specify the alt text. Awesome. And TypeScript's not going to be happy with this at all. We will fix that later. No worries. Let's just make sure that this thing is going to work.

[09:03] So we'll select the koala cuddling and then submit. And boom, there it is. We can take a look at this and double check that the alt text is set properly. So we're in a good spot. Well done. And we can change the image as well. So here, actually, before I do that, let's look at this and we'll see,

[09:21] we have that hidden input with that value. So that is going to be submitted properly and we can do cute and submit that. And that image was updated and has the proper alt text. Solid. So let's review really quick because there was quite a bit of things

[09:40] or a number of things going on in here. So first of all, Kelly built us this image chooser, which is awesome. And the important bits for us was just to, first of all, render the image chooser with the image from the note. So that first image. And if that image exists, then we have an existing image.

[09:59] We'll behave differently based on that. So if it does exist, then we have a preview for that image and that's what is displayed right there. If it doesn't, then we will not. So here in this one, we do not have a preview image. And then we have, yeah, we display that preview image here. If we do have an existing image,

[10:18] then we need to let the backend know that we're trying to update that existing image. So we will pass that ID. And then, and the reason that's important is because right now we may only have one image per note, but in the future we will have multiple. And so we need to let them know which image we're trying to update.

[10:37] And so we need to have that image ID there. And then we have our image chooser. That's our input. That is of type file. We give it the name of file and we tell it to accept only images. And then we set the name of our alt text. So then on the backend piece of this, we can switch from request.formdata

[10:56] to this parseMultipartFormData. You can feel free to dive into the implementation of this if you so choose or desire. It'll be right in here. There's a lot of stuff going on with parsing these different chunks and everything. It is, you know, it's kind of interesting. This is using the multipart parser

[11:16] coming from the Web3 storage module. So you can take a look at that if you so choose. And then the createMemoryUploadHandler, also not as complicated as you might think. So we dive into that and it's just taking it chunk by chunk. And if we get to a chunk that's too big, we say, oh, no, we can't take that anymore. And we, you know, throw an error.

[11:36] And so that's why we're able to just chunk this up into memory safely because we know people can't fill our server's memory with files that are too big. And then it creates a file object out of that. So really not quite as complicated as you might think. And then once we have that, we have our form data. We parse it like normal.

[11:56] And so the properties that are there are gonna be parsed and work out as they were before. But then the things that we don't have as part of our schema, we're going to just grab ourselves. And so we'll get the image ID and the file, which now is going to be that file object that the memory upload handler is creating for us

[12:15] and the alt text. And so, yeah, we've got a little bit more work to do, but the feature totally works. Let's ship this thing. Good job. And yeah, let's move on to the next step.

File Upload Functionality 

[00:00] Thank you so much Kelly the co-worker for doing a bunch of work for us. She's added some stuff to the edit page of our notes so that we can easily add file upload. So that's what your job is and when you're all done it should look something like this.

[00:15] So you should render a default image to make it so people can add their image themselves. We can add some cute koala here and we say cute koala illustration by Midjourney. Thank you Midjourney. Then we'll hit submit and that will show up on our note page.

[00:34] So we are going to upload some files and it's going to be amazing. You're going to love it and there are just a couple of things that you need to know about in getting ready for this and that's how Remix handles file uploads with the Create Memory Upload Handler and the Parse Multipart Form Data and all of that stuff.

[00:53] Which is currently unstable but very soon should be stabilized. So you're going to be working on that a little bit and we also want to make sure that people aren't uploading files that are too big so you're going to be doing some of that. And for this step we're going to actually kind of ignore, just do a little hand waviness on the TypeScript stuff.

[01:12] We're going to deal with that later as well. So have a good time working on this and we'll see you when you're done.

Forms are the primary mechanism for interactivity on the web.

But for all of their importance, forms can be incredibly frustrating for developers and users alike.

There are a lot of moving parts to consider: 

You need to validate user input and handle complex data structures, while being secure from bots and data-stealing attacks. The UI should inform users of any issues as quickly as possible, and be accessible for all.

The Professional Web Forms Workshop will equip you with the tools to handle all of these challenges and more.

## Form Validation

HTML has several attributes built-in that help with form element validation. Unfortunately, they're not enough on their own. On the client-side, bad actors can bypass checks by manually adding the `novalidate` attribute or making requests directly. On the server side, there's no standard way to respond to validation errors other than a generic 400 status code.

In this section, you'll implement a base level of form validation:

- Essential HTML attributes for validation
- Server-side validation with JSON responses
- Displaying errors with the `useActionData` hook
- Disabling default browser validation messages with `useHydrated`

## Accessibility

Accessibility is often an afterthought, but should be a priority. While forms are just one part of the accessibility equation, they're a big one. In this section, you'll learn how to make sure your forms accessible and usable by all of your application's users:

- Properly associating labels with input fields
- Adding appropriate ARIA attributes when necessary
- Manage keyboard focus in response to errors and user interactions
- Creating and using a `useFocus` hook to direct the user’s focus
- Considerations for accessibility testing

## Schema-Based Validation

Manually writing conditional checks for every field in every form is tedious and error-prone: *Is there content in the field? Is it the right type? Is it within the acceptable range? There must be a better way!*

Fortunately, the combination of the Zod and Conform libraries makes it easy to define reusable declarative schemas to validate form data on the client and server:

- Safely replace HTML validation attributes with schemas
- Zod error handling & message customization
- Progressively enhanced validation with Conform
- Share type-safe validation logic between client and server

## File Uploads

Forms need to support more than just text. Images, videos, audio files, and other documents need a different type of input. Depending on the size of the file, you'll have considerations for how and where it is uploaded. In this section, you'll learn how to handle file uploads in a secure and efficient way:

- Uploading images from an `ImageChooser` component
- Handling file uploads on the server
- Schema validation for file uploads with Zod

## Complex Data Structures

The `FormData` API does not support representing objects or arrays– only key/value pairs. It also won't allow you to nest forms within each other. This makes representing complex data structures difficult without jumping through some hoops. Luckily for us, Conform has a great solution when your forms get complex. Here you'll practice:

- Infer field types with Zod
- Nesting objects as a form
- Represent arrays of fields with the `useFieldList` utility
- Add and remove items with Conform's `intent` buttons

## Spam Prevention with Honeypots

Spam bots are constantly crawling the web, looking for forms to submit junk data to boost their client’s search engine rankings and find holes in your security. This can strain server resources, contaminate databases, and cause other unforeseen consequences. One way to combat this is by using a "honeypot", which will prevent a form from being submitted by a bot. This section will teach you how to:

- Create a simple hidden-field validation
- Add a configurable honeypot instance to an action
- Prevent form submissions that are too fast
- Use environment variables for encryption seeds

## CSRF Protection

Cross-Site Request Forgery (CSRF) attacks are a type of malicious exploit where a user is tricked into performing an action they did not intend to. This is usually done by embedding a link or form in a page that the user is already authenticated to. Think of a user logged into their bank account clicking a link that transfers money from their bank account to the attacker's. To prevent this type of attack, you'll want to:

- Create a signed cookie in the user's browser
- Include unique user tokens in forms
- Validate tokens on the server via request headers

## Rate Limiting

You definitely want to prevent bad actors from making tons of requests to try to brute-force their way into your app or cause general chaos. However, malicious intent and spam aren't the only reasons you need to protect your site. Even too many legitimate requests can cause problems. Rate limiting is a way to prevent users from overloading your server with requests. Here you'll learn:

- Considerations for different limits for `GET` vs. `POST` requests
- Implementing basic rate limiting with Express middleware
- Tiered rate limiting depending on which form is being submitted

The Professional Web Forms Workshop will equip you for building complex, fully accessible forms that handle validation and file uploads while preventing spam.

Professional Web Forms

Kent C. Dodds

Full Stack Vol 1

Intro to Professional Web Forms Workshop

Introduction to Workshop

Intro to Form Validation 

Discover the importance of validation in web apps. Learn to implement required field validation for data integrity and UX enhancement.

Leverage HTML attributes for form validation, enhancing UX and accessibility. Explore browser validation and screen reader integration for user guidance.

Form Validation for Accessibility

Required Field Validation for User Input

Implement server-side validation to enhance security and user assistance, preventing client-side bypass. Customize error messages for a seamless design.

Master server-side form validation for data integrity and user-friendly error messages. Enhance UX by securely validating input before server processing.

Server-Side Form Validation and Error Handling

Server-side Validation and Custom Error Messages

Prevent incorrect form submissions pre-JavaScript with novalidate attribute using useHydrated hook. Elevate UX, maintain data integrity.

Optimize form validation with 'useHydrated' hook for client-side hydration. Enhance UX with browser-built and server-side validation synergy.

Form Validation with Client-Side Hydration

Dynamic Error Validation with Hooks

Dad Joke Break From Validation

Form Validation

Intro to Accessibility

Learn how to troubleshoot and fix issues with a non-functioning reset button and accessibility problems in a web form.

Learn how to properly associate buttons and form elements, such as the reset button, with their respective forms for improved functionality and accessibility.

Improving Accessibility and Form Associations

Fixing Form Reset Button and Accessibility Issues

Associate error messages with input fields via ARIA attributes for precise screen reader notifications. Learn about semantic HTML and ARIA for accessibility.

Use ARIA attributes like ARIA invalid & describedby. Link error messages to inputs for improved screen reader support, aiding assistive tech users.

Accessible Forms with ARIA Attributes

Error Messages and Accessibility with ARIA Attributes

Enhance app accessibility & UX with focus management: auto-focus error fields, programmable forms, & better editing. Create an inclusive, user-friendly app.

Enhance React app accessibility and UX: auto-focus form inputs and navigate to error messages for improved handling of form errors.

Managing Focus for Form Errors

Focus Management for Better User Experience

Dad Break Joke Accessibility

Accessibility

Intro to Schema Validation

Optimize development with Zod schema validation. Boost efficiency and code robustness, replacing custom logic for an enhanced developer experience. 

Learn how to implement schema validation using Zod in a note editor application. Discover how to define and enforce data

Schema Validation with Zod 

Schema Validation 

Data parsing with Conform's Conform utility. Apply server-side logic and streamline development with additional UI utilities for efficient form handling.

Improve UX & enable progressive enhancement: Replace form validation & error handling with powerful Zod utility in your app

 Form Submission and Error Handling with Conform & Zod

Form Data Parsing with Conform

Enhance UI with Conform's React utilities for end-to-end type safety. Leverage progressive enhancement for a fabulous development experience.

Eliminate custom code for better UX. Seamlessly manage form submission and client-side validation with Conform, ensuring robust server-side validation

Simplifying Form Handling with Conform and Schema Validation

Type Safety with Conform

Dad Joke Break Schema Validation

Schema Validation

Intro to File Upload

Improve code quality and address TypeScript errors for a robust application, making Lily the life jacket (and yourself) happy.

Update schema for image ID, alt text, and file uploads. Master file validation with Zod for size restrictions and error handling on client & server sides. 

Validating File Uploads with Zod Schema in a Web Application

TypeScript Integration

Dad Joke Break File Upload

File Upload

Intro to Complex Structures 

Address challenges in grouping properties into sub-objects in forms, especially for multiple image uploads. Satisfy Zod's requirements for seamless integration.

Learn to add image field set schema to Zod schema, update HTML elements, and integrate with Conform for type safety and form functionality. 

Implementing Image Field Set with Conform and TypeScript

Grouping and Managing Related Fields in Form Objects

Update your app's schema for multiple images, adapt actions/components, and enable seamless addition/removal of multiple images for an enhanced user experience.

Master dynamic image lists with Qualifax: add and remove images effortlessly. Update schema, implement field sets, and iterate through image choosers with ease.

Dynamic Image Lists with Field Sets 

Multiple Image Uploading 

Dynamic image addition and deletion with alt text functionality, progressive enhancements, and input submission using Conform utilities in web development

Master dynamic button generation for form accessibility using Conform utilities. Modify field sets with list functions, explore progressive enhancement.

Dynamically Delete and Add Buttons

 Interactive Image Management

Dad Joke Break Complex Structures 

Complex Structures

Intro to Honeypot

Add a hidden input field honeypot to deter spam bots, enhance deliverability, and prevent spam issues. Explore additional tips for form security.

Boost sign-up form security with invisible honeypot fields to catch spam bots. Discover effective techniques for handling bot submissions in your app.

Honeypot Fields in Sign Up Forms

Adding a Honeypot to Protect Against Spam Bots

Protect your website from spam bots with automatic updates to Honeypot configurations.

Enhance security with Remix Utils Honeypot fields. Customize divs, ARIA, and server-side validation to deter spam. Best practices for errors and HTTP codes.

Honeypot Fields for Form Security

Honeypot Protection with `remix-utils`

Efficiently implement Honeypot security on forms: Transfer server data to client for reliable bot protection.

Implement honeypot protection: Create provider, configure props, render components, prevent quick form submission, thwart automated bots.

Honeypot Protection

Honeypots for Form Security 

Ensure consistent Honeypot encryption secret across servers and regions for form data integrity and conflict avoidance

Securely add honeypot secret to server validation, configure in local .env for data protection.

Setting Up Honeypot Security for Server Environment Variables

Consistent Encryption with Honeypot Server

Dad Joke Break Honeypot

Honeypot

Intro to CSRF

Implement CSRF protection: Generate tokens, set secure cookies, associate with clients, and use environment variables.

Implement Node.js CSRF utility: Generate tokens, secure cookies, prevent cross-site request forgery attacks.  

Creating and Managing CSRF Tokens With Node.js

CSRF Protection with Cookies 

Protect user data with authenticity tokens: Render, verify, and enhance user experience.

Secure forms with Authenticity Token input and CSRF validation for protection against tampering. Improve security and error responses.

Security with Authenticity Token and CSRF Validation

Authenticity With Token Protection 

Dad Joke Break CSRF

Cross-Site Request Forgery

Intro to Rate Limit 

Learn how to implement rate limiting middleware in Express for efficient resource management in your server.

Safeguarding Your Server: Adding Rate Limit Configuration

Optimizing Your Express Server with Rate Limiting Middleware

Implement tiered rate limiting: Strong for sign-up/login, moderate for posts, and general defense. Custom middleware assigns tiers.

Professional Web Forms

Professional Web Forms

Transcript

File Upload Functionality

Transcript