Submission
Loading "Submission"
Run locally for transcripts
π¨ 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 file does not handle the
POST request
yet.To fix this, go to 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 preventing 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 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!
