Inserting comments will work almost exactly the same way as the likes for an image. The only difference is that we are creating a new comment model, instead of updating an image model. The original code we had in our comment function was:

res.send('The image:comment POST controller'); 

Let's replace this with some code that will find the image by image_id in the URL again, but this time, instead of updating its likes, we are going to create a new comment and assign the comment's image_id value with the _id of the image we are currently viewing (this is to attach a relationship to the comment so that it actually belongs to an image). Replace the entire comment function in controllers/image.js with the following block of code:

Models.Image.findOne({
        filename: { $regex: req.params.image_id }
    },
    (err, image) => {
        if (!err && image) {
            var newComment = new Models.Comment(req.body);
            newComment.gravatar = md5(newComment.email);
            newComment.image_id = image._id;
            newComment.save((err, comment) => {
                if (err) { throw err; }

                res.redirect(`/images/${image.uniqueId}#${comment._id}`);
            });
        } else {
            res.redirect('/');
        }
    }); 

Here, you can see that we are using the same code from the like function to query MongoDB and find the image with the matching filename from the URL.

Assuming a valid image is returned as a match, we create a new comment object called newComment and actually pass the entire HTML form body into the constructor. This is a bit of a cheat, as it's a coincidence that our HTML form uses form fields that have the same name and structure as that of a comment model. If you were to perform the console.log operation on the req.body object, you would see something like the following:

{ 
name: 'Jason Krol', 
email: '[email protected]', 
comment: 'This is what a comment looks like?!' 
} 

That's identical to what we would have built manually anyway, so we just take a shortcut and pass the whole thing in as it is! After that, we update a few more properties on the newComment model. First, we manually set a gravatar property, which is where we will store the MD5 hash value of the commenter's email address so that we can retrieve their Gravatar profile picture. Gravatar is a universal avatar service that stores profile pictures based on a user's email address. However, the unique ID they use for each profile is an MD5 hash value, which is why we have to store that value.

As we are relying on the third-party MD5 module, we need to ensure that it's installed in our project and saved to our package.json file as a dependency. From your project's root folder, execute the following command:

    $ npm install md5 --save

In addition, we need to require the module in the controllers/image.js file at
the very top, along with the other modules we are requiring:

const fs = require('fs'), 
path = require('path'), 
sidebar = require('../helpers/sidebar'), 
Models = require('../models'), 
md5 = require('md5'); 

Finally, we set the image_id property of newComment to the _id property of the image we found at the beginning of the function. Then, we call the comment model's .save() function and redirect the user back to the image page. For convenience, we append a bookmark to the new comment's _id to the URL so that when the page loads it will automatically scroll down to the users' comments that have just been posted.

With that functionality in place, go ahead and fire up the app and open it in your browser. Visit the image page for any images you've uploaded, and post a comment. Once the comment posts and the page reloads, you should see something like the following screenshot under an image: