Week 4: Error Handling Sir this is a Wendys

[counselorbot[bot]]

Week 4 Step 2 ⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Error Handling ~ Sir this is a Wendy's

Demo: 🐰

Ideally, users will fill the web form with the correct information. However, people make mistakes. In this step, we will be implementing some form validation to make sure that a user has inputted text value before submitting their password.

✅ Task:

• [ ] 1: Check you are on the bunnimage-frontend branch
• [ ] 2: Change your HTML form to accept multipart/form-data in index.html
• [ ] 3: Add a file input to index.html that accepts image/x-png,image/jpeg and add the attribute name=image
• [ ] 4: Modify the function in index.js to create an alert if either the file input or the name input is null
• [ ] 5: Modify the button so that it submits the form by changing its type attribute to "submit"
• [ ] 6: Prevent the page from reloading after submission
• [ ] 7: Commit your updated code to bunnimage/index.html and bunnimage/script.js
• [ ] 8: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 Test your Work

Open up your LiveServer plugin and start your server.

‼️ You have three test cases to try

1. **The "correct" way**: Submit both a file and text. Check that you receive "Thanks!" 2. **The "unexpected" way (file)**: Submit a file that is not png or jpeg. Does it work? 3. **The "unexpected" way (text input)**: Try submitting without entering a username. You should get an alert box that says "No name error."

1: Accepting Images as an Input

In HTML Forms, the enctype attribute specifies how the form-data should be encoded when submitting it to the server. Like we learned before, if we want to upload files, we need send form-data encoded as multipart/form-data

    <h1>Bunnimage</h1>
    <form enctype="multipart/form-data">
    <label>Code: </label>

To add the image upload input, add an additional file input within the form & change the submit button's type.

<form enctype="multipart/form-data">
   <input type="file" name="image"></input>
   <input id="username" type="text" placeholder="Enter your file's name">
   <input type="submit" />

2: Input Validation?

We need to validate two things.

❓ How do you check that the image is either .png or .jpeg format

The HTML `` accept Attribute specifies a filter for what file types the user can pick from the file input dialog box. The accept attribute can only be used with . ```html

``` Additionally, the HTML may not catch an invalid file 100% of the time, so we will also need to use JavaScript to do some validation. 1. Once a file is uploaded, you will need to display an error when a file of invalid format is added. 2. Get the [name of the file](https://stackoverflow.com/questions/857618/javascript-how-to-extract-filename-from-a-file-input-control) from the input box (use the `change` event listener for the input) 3. Check if the file is either `.png` or `.jpeg` using [this StackOverflow post](https://stackoverflow.com/questions/8231058/file-type-validation-with-javascript)

❓ How do you check that the text box isn't empty

To validate that the name isn't null, check if `document.getElementById("username").value` isn't empty, to change the `output` div to "Thanks!", or display an `alert("No name error.")` > :bulb: **Hint**: Use your JavaScript conditional skills!

📹 Walkthrough Video

[counselorbot[bot]]

⚡️ You're ready for Serverless!

Move on to the next issue.

[counselorbot[bot]]

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!