Introduction

Being a Backend developer means solving issues or problems that looks simple, like connecting a database to the server, maintaining a reliable system or uploading images in a backend system. These issues that look trivial were once mountainious to me when i was a beginner backend engineer but by scaling this came my growth.

The ability to solve issues is my favorite part of programming, the joy i feel when hours spent result in a solution can only be compared to a few things. This alongside learning new softwares , libraries, tools ,etc is why I LOVE being a programmer. And that is why I took on the challenge when I faced difficulty with uploading pictures in a backed system.

The Problem

For a clearer picture; I was building an E-commerce application which needed a feature where the admin can add product photos to database for customers to view.

The tech stack was nodejs, express and the database i used was mongoDB.

I started off uploading the images straight as bit streams to the database but I knew i was doing it wrong because the client-side could not retrieve this image in its original form.

Solution

Have you heard the saying along the line , "You would know you are in for a long run if you do not find your solution in stackoverflow". That was ME!.

I moved from pages to pages on stackoverflow, checked other blogs but still could not find a way around my problem. Then finally I met up with a friend who was working on something similar and by studying his codes I discoverd the solution to my problem.

The solution; A package that can grab the file that is attached to a request body was used in his codes. By using this package mutler which handles multipart/formdata that is used to upload files like image, I wrote a code that allows the server upload images without converting to bit streams.

code snippet of the middleware

const Storage = multer.diskStorage({
  destination: "product_images",
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

The the Raw image is the uploaded to a cloud strorage service like cloudinary and the link to image is then stored on database.

code snippet of integrating cloudinary

...
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});
const addProduct = async (req, res, error) => {
  const imagePath = req.file.path;

  // upload to cloudinary
  const result = await cloudinary.uploader.upload(imagePath);

  await Products.create({
    name: req.body.name,
    category:
      req.body.category,
    description: req.body.description,
    price: req.body.price,
    productImage: {
      productImg: result.secure_url, //image url
      productid: result.public_id,
    },
    quantity: req.body.quantity,
  });

  return res.status(201).json({
    message: "product has successfully been created",
  });
};

Conclusion

Life will be boring without the ability to challenge oneself and grow above the odds. An ability which being a programmer affords me.

Learning a tool or software on demand and adding it to what you are working on is also important skill every developer needs to have. And that is why i applied for HNG internship. Because i believe HNG can take my career to next the level and introduce me to tools or software that can make me grow as a backend engineer and also learn to work in a team.

Secondly, It is said that our network is our networth and my friend who constituted part of my network helped me save time by providing a solution. And it is my hope that by joining the HNG internship premium, I will continue to grow my network of engineers.

So next time you come across a problem, programming or not show a little perseverance cause perseverance has always been part of the story of growth.