Submission

🐨 For this exercise, I want you to read through these instructions and complete things step by step as you read the instructions so you can observe the changes as they come. There aren't a lot of steps, but it's important you understand each one.

I recommend opening the playground in a new tab so you can open the network tab.

👨‍💼 Right now, when we submit the form, we get a full page refresh and what we entered ends up in the URL. This is the default behavior of forms. This works well for a search page, but it's certainly not optimal for a form like this one for two reasons:

We don't want to see the data in the URL (like the password) as that can appear in logs, be saved in the browser history, and is visible to anyone looking over our shoulder.
We generally don't want a full-page refresh as that can be jarring to the user and forces the browser to re-evaluate all our client-side JavaScript.

To handle the first problem, let's switch to using POST instead of the default form HTTP method (which is GET). This will send the data in the body of the request instead of in the URL:

<form action="api/onboarding" method="POST"></form>

🐨 Go ahead and make that change now, then come on back for the rest...

Now, when you submit the form, you'll notice we get an error because our

api.server.ts

file does not handle the POST request yet.

To fix this, go to

api.server.ts

and follow the instructions in there to handle non-GET requests. You'll notice we need to switch from using search params to using request.formData() to get the form submission. This is because the body of the request is not a query string, but rather an application/x-www-form-urlencoded request.

🐨 Ok, now I want you to submit the form again. Make sure you include a photo.

You should notice that it shows the photo's filename rather than showing the file you uploaded. Why is this?

I want you to check the network tab in your dev tools and see what the request looks like because we have a third problem. You'll notice that the Content-Type header is application/x-www-form-urlencoded and the body of the request is a query string. This is the default behavior of forms and it's a fine default for simple forms.

The problem for us is we're trying to upload a file which cannot be reasonably represented by a string in the URL (especially for large files). The file is simply represented by its name, and that is all the server will get which is just not very useful to the server.

We can change that by adding a encType="multipart/form-data" attribute to the form. This will change the Content-Type header to multipart/form-data and the body of the request will be a multipart/form-data request. This is the same type of request that you'd get if you were uploading a file which is what we're doing with the photo.

🐨 Now, update the form to have the appropriate enctype attribute for file uploads:

<form
	action="api/onboarding"
	method="POST"
	encType="multipart/form-data"
></form>

Great, so now if you check the network tab you'll find that the file is actually uploaded properly.

Now let's get to the full page refresh issue. The only way to solve this is by handling the form submission through JavaScript and prventing the built-in browser behavior. In a real application, you would want to make sure your server can handle those form submissions (for progressive enhancement reasons). But you'll also want to still prevent default to avoid the full-page refresh.

This is where the Remix web framework comes in to handle all that for you. But in this React-focused workshop, we're not going to cover that in detail.

So instead of continuing with our

api.server.ts

file, we're going to add an onSubmit handler to the form to handle the form submission in JavaScript and prevent the browser's default behavior.

<form
	action="api/onboarding"
	method="POST"
	encType="multipart/form-data"
	onSubmit={event => {
		event.preventDefault()
		// ...
	}}
></form>

🐨 Go ahead and make that change now, then come on back for the rest...

Now you shouldn't be getting a full-page refresh (and you'll also not be getting the form submission either). So now, we just need to get the form data and log that out. To do that, we'll use the FormData API:

const form = event.currentTarget
const formData = new FormData(form)
// The browser doesn't display form values very well when you console.log(formData)
// so you can do this:
console.log(Object.fromEntries(formData))
// this will create an object out of the properties in the formData so you can
// more easily see what's in there. Keep in mind that formData can have multiple
// values for a single key, so you don't generally want to rely on this method
// for production code.

You can get the form from the submit event via event.currentTarget.

🐨 Go ahead and make that change now, then come on back for the rest...

Now, when you submit the form, you should see the form data logged out to the console. You can also check the network tab to see that the form submission is not happening so we're not getting an error and there is no refresh.

Great work!

07. Forms/04. Submission (💪 problem)

Submission