DEV Community: mahiuddinTuhin

Understanding the File Upload Middleware with Cloudinary in Node.js

mahiuddinTuhin — Thu, 22 Feb 2024 04:53:22 +0000

In this article, we will explore a middleware for file uploads in a Node.js application, which leverages Cloudinary for image storage. The middleware is written in TypeScript and uses the multer library for handling multipart/form-data, which is primarily used for uploading files.

Setting Up Cloudinary

Cloudinary is a cloud-based service that provides an end-to-end solution for image and video management, including uploads, storage, manipulations, optimizations, and delivery.

The Cloudinary configuration is set up at the beginning of the code:

cloudinary.config({
  cloud_name: config.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

The cloud_name is your unique Cloudinary account identifier. The api_key and api_secret are your Cloudinary account credentials, which should be kept secure and not exposed in your code.

The Upload Function

The uploadToCloudinary function is responsible for uploading a file to Cloudinary:

const uploadToCloudinary = (path: string, imageName: string) => {
  // ...
};

This function takes two parameters: the local path of the image to be uploaded (path) and the desired public ID for the image on Cloudinary (imageName). If the path is not provided, an error is thrown.

The function returns a Promise that resolves with the result of the upload or rejects with an error. After the upload is complete, the local file is deleted using the fs.unlink function.

Multer Middleware

Multer is a middleware for handling multipart/form-data, which is primarily used for uploading files. It is used to process the incoming request and store the uploaded files in the local filesystem.

The storage object defines where to store the uploaded files and how to name them:

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, process.cwd() + "/uploads/");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() *  1e9);
    cb(null, file.fieldname + "-" + uniqueSuffix);
  },
});

The destination function determines the folder where the uploaded files will be stored. The filename function generates a unique name for each uploaded file.

Finally, the upload middleware is created using the defined storage:

export const upload = multer({ storage: storage });

This middleware can now be used in an Express route to handle file uploads. When a file is uploaded, it will be stored in the specified directory and then uploaded to Cloudinary.

Code at a glance

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/no-var-requires */
import { v2 as cloudinary } from "cloudinary";
import multer from "multer";
import config from "../config";
import AppError from "../errors/customError";
const fs = require("fs");

cloudinary.config({
  cloud_name: config.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

const uploadToCloudinary = (path: string, imageName: string) => {
  if (!path) {
    throw new AppError("File path does not found!", 400);
  }

  return new Promise((resolve, reject) => {
    try {
      cloudinary.uploader.upload(
        path, //local image path
        { public_id: imageName },
        function (error, result) {
          if (error) {
            reject(error);
          }
          resolve(result);

          // removing image file from 'path' of image
          fs.unlink(path, (err: any) => {
            if (err) {
              throw new AppError("Error in deleting file after uploads", 400);
            }
          });
        },
      );
    } catch (error: any) {
      throw new AppError(error.message, 400);
    }
  });
};

export default uploadToCloudinary;

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, process.cwd() + "/uploads/");
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
    cb(null, file.fieldname + "-" + uniqueSuffix);
  },
});

export const upload = multer({ storage: storage });

Conclusion

This middleware provides a robust solution for handling file uploads in a Node.js application. By integrating Cloudinary, it offloads the responsibility of storing and serving images, allowing the application to focus on other tasks. The use of Promises and async/await makes the code easier to read and understand, and the use of multer simplifies the handling of file uploads.

Understanding The Sharding in MongoDB

mahiuddinTuhin — Sun, 31 Dec 2023 14:00:00 +0000

Before understanding sharding, we need to understand the vertical and horizontal scaling of the Database.

Suppose your data collection has a big growth and now you must extend your database server. If you extend the capacity of your database server eg. RAM, ROM or CPU then it would be called verticle scaling of the database.

But if you increase the number of servers to divide the data into chunks and distribute data into those multiple small servers, that would be called horizontal scaling of the database.

Now, let's come to the Sharding in MongoDB. Sharding in MongoDB is a method or approach for distributing or partitioning data across multiple machines, that is the horizontal scaling of the MongoDB database. It is beneficial when a single machine can't handle properly large modern-day workloads or data(eg. ~100 million of data) anymore. Then enabling horizontal scaling of the database by distributing chunks of data. This means you are adding several server machines into your server rack so that all the data can be shared with the data set and loaded within all the servers of the rack. Horizontal scaling allows us for near-limitless scaling to handle big data and intense and massive workloads.

Best Tailwind Component

mahiuddinTuhin — Tue, 04 Apr 2023 03:57:19 +0000

*When it comes about front end development with tailwind then we feel some pre-made component. But installing third-party library sometimes is really pain and tough to customize also. Here I'm sharing few best tailwind components without installing third party library. *

FloatUI:

UI components for React and Vue (soon) with Tailwind CSS, every example support both directions LTR and RTL. Also it has some free templates.

HyperUI:

HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.

Merakiui:

Streamline your web development process with our comprehensive solution. Our form layouts, tables, and modal dialogs are expertly crafted to help you build beautiful and responsive web applications effortlessly.

kitwind:

kitwindare giving away our first UI kit for free. It includes over 130 sections, built with TailwindCSS, for your awesome projects.

All the sections are fully responsive and available in HTML, VueJS, and React. You can use them on unlimited personal and commercial projects.

tailblocks:

Tailblocks is a website that provides a collection of free, open-source Tailwind CSS blocks. These blocks can be used to quickly create complex UI components.

Mambaui:

Mamba UI is a free, open-source collection of UI components
and templates based on Tailwind CSS.

Windstatic:

A set of 161 elements & layouts made with Tailwind CSS and Alpine.js Skillfully designed with an eye for aesthetics, offering an excellent starting point for your upcoming project.

Tailus:

Easy to customize UI components, blocks and templates built on top of modern frontend tools to make your ideas stand out.

Wickedblocks:

Over 120 fully responsive component and blocks you can copy paste into your Tailwind projects. Use it in as many projects you want to and as many times you need too.

Tailwind-kit:

Tail-kit gives you access to over 250 free components and free templates, based on Tailwind CSS 3.0. It's all compatible with React, VueJS and Angular application.

Flowrift:

A library filled with Tailwind CSS UI blocks, components & templates. Browse an ever-growing UI kit inside a highly optimized app. View / copy / customize.

Treact Owaiskhan:

Treact Owaiskhan provides 52 components along with the premade landing pages so you can create your own landing page within minutes as you see fit. You can combine these components to create 1000s of unique attractive web pages.

Kutty:

Kutty is a tailwind plugin for building web applications. It has a set of accessible and reusable components that are commonly used in web applications.

Gust UI:

Gust UI is an assortment of components, elements, and pages constructed using Tailwind CSS in order to make your development process easier and web apps elegant.

Mynaui:

Mynaui contains UI Components and Elements made with Tailwind CSS ✨ Free · Open Source · Accessible · With Figma · Other Buzzwords

Tailgrids:

Wide range of 500+ free & premium Tailwind CSS UI components, blocks, sections, examples and templates to create beautiful web user interface for your web projects fast. High-quality UI elements handcrafted to solve your design and coding challenges for making your web project closer to launch.

That's all from side. It will be great if there needs any correction or other components to add, please share with with me.