Build A E-Commerce site using MERN Stack: Step 7A — Update Models, and setup Cloudinary Controller.

We will now update our models, and create our cloudinary controller.

Before anything I would recommend going over previous steps.

First delete all the product from your products collections in your mlab database.

Delete all the product and click delete all products.

Your home page should be empty. The whole reason behind this is that we are gonna add a picture model to our product model, and our createProduct, and updateProduct controller methods in our admin_controller.js file.

Go to your product.js file in your models folder and update the picture to be a String.

//Add a New picture added to model.picture: String

Now go to our admin_controller file, and then to the createProduct method and add another property to your request body and add it to your new Product instance.

createProduct(req, res) {//Destruct the values sent in from frontend from req.body;//Now also destruct the picture also from the request body.--------------------const { name, description, price, picture } = req.body;//Have a new Product model instance set to a variable to be save to database.--------------------------let newProduct = new Product({name,description,price,//add picture property to the product model instance. -----------------------picture});//use the .save() to save model to database.newProduct.save();//Then send back the products.res.status(200).json({product: newProduct});},

Now it will create a new product with a name, description, price and picture. Next go to your update product and do the same as what you did with your createProduct method.

updateProduct(req, res) {//Get the id, since we need to update a specific product.//Destruct the id from the request params.const { id } = req.params;//Destruct the update data from the req.body,// also add picture to destruct from req.body ;------------------------------const { name, description, price, picture } = req.body;//Find the product, and update it's propertiesProduct.findById(id).exec((err, product) => {if(err) console.log('Updated Product-----------------', err);product.name = name;product.description = description;product.price = price;//Also update picture.product.picture = picture;//Save the product with updated data.product.save();//Then send back the data, just for testing purposes.res.status(200).json({product});})},

Great that is all the updates we need. Now lets configure cloudinary.

First go to our env and define our CLOUDINARY_API_SECRET which we will use in the backend, and our REACT_APP_CLOUDINARY_API_KEY to define in our frontend. You can access them in your cloudinary dashboard. If you are having issues with cloudinary here is a great tutorial on it by Josh Borup.

Let’s go to our index.js

//Now setup cloudinary this endpoint will get the credentials from cloudinary_controller which will be signed.app.get('/api/upload', cloudinaryController.upload);

Now before you go to your cloudinary_controller.js file. First add 3 variables to your .env which are REACT_APP_CLOUDINARY_URL, REACT_CLOUDINARY_API_KEY, for our frontend. Then our CLOUDINARY_API_SECRET for our backend.

REACT_APP_CLOUDINARY_URL=<Cloudinary upload url>
REACT_APP_CLOUDINARY_API_KEY=<CLoudinary API key>
CLOUDINARY_API_SECRET=<Cloudinary API Secret>

Define our upload method, we will first import cloudinary before the module.exports which will be responsible for signing the request.

//Import cloudinary that will be responisble for signing the credentials.const cloudinary = require('cloudinary');

Then within our upload method, we will assign a timestamp which will hold current date that is rounded, and it will be divided by 1000.

//We will first define our timestamp, and our api_secret//Create a new Date instance.then get the time and divide it by a thousand, then have it within Math.round();const timestamp = Math.round(new Date().getTime() / 1000);

Now will assign our api_secret.

//Define our api secret that we will use to sign the request.const api_secret = process.env.CLOUDINARY_API_SECRET;

Next we will sign our credentials and assign to our signature, with our credential signed with our timestamp passed as a object, and our api_secret.

//Now define your signature by using cloudinary.utils. sign_api_request to sign request with the timestamp and api_secret////Passs a object with your timestamp, and then as a second argument your api secret.const signature = cloudinary.utils.api_sign_request({timestamp: timestamp}, api_secret);

Then we will assign a payload object that will be passed to the frontend.

//Define our payload that will have the api keyconst payload = {timestamp,signature}

Finally we will send it to the frontend.

//Then send our payload to our front-endres.status(200).json({payload});

Great we have our backend set up now for us to start configuring our frontend for our admin page.

Here is my Github for reference:

Happy Coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store