Welcome Back 🤩

This is the third series of the Building an Email Application using Node JS Express JS with Gmail and Nodemailer. You can check out the second series Here where we designed our application interfaces, the compose mail page, and the success page.

---

Now that we have our project UI setup, let's look into handling the data submitted by the sender.

Note that, our HTML form has the following form input types

1. email - text
2. subject - text
3. message - text
4. attachment - file

Generally, to have access to a request body through the req parameter in the get() function, we need a middleware package called bodyparser, but this is also provided by the express JS function, so we do not need to install any package for this.

Update the index.js with the code below

// After the express static middleware
...

// Body parser
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

...

Now that we have our body-parser setup, let's see it in action by creating a POST route in our application, which we will use to post the entries of the sender to our server.

Add the following code below the get route function

// Post route to handle retrieving data from HTML form to server
app.post("/send_email", (req, res) => {
  console.log(req.body);
});

We also need to update our HTML form to have a POST method and also set the path to post the data to like below.

    <form
      action="/send_email"
      method="POST"
      style="max-width: 500px; margin: auto"
    >

Explanation

1. action="/send_email"

• The action attribute is used to specify where we want to send the form data when the form is submitted, we are sending the data to the /send_email route in our application.

2. method="POST"

• The post method is good when sending sensitive information from the client (browser) to the server (backend), it hides the form values from the browser address bar unlike the GET method which displays it, the post method also appends form data inside the body of the HTTP request, this body is what express js is parsing and is also been retrieved using through the req parameter in our route functions.

3. req.body

• Here we are accessing the form body object from the req parameter which contains all the data from our HTML inputs (example ahead).

Now that we have all this setup, let us proceed to send a sample mail that will be displayed in our terminal.

Fill in the form inputs and also select an attachment then click the send mail button.

If you have all your project set up correctly you, should have the form values displayed below in your terminal.

That 👆 is the example of the req.body, this picks up the attribute name of the HTML input tags

---

The POST Method

Did you noticed that your browser address bar didn't change 💁‍♂️, now set your form method to GET and try sending a mail again, what did you notice?

---

The GET Method

The submitted data are been displayed on the address bar, imagine you are submitting your password 😱.

Which method will you use for credit cards ?.

---

In the next article, we will be building the logic to handle attachments in our Node JS Server.

Next 👇

• Handling Files over a Node JS server

Let me know in the comment section if you have any difficulties.