Image upload using NodeJs

Nowadays, the most common feature of any website is uploading an image as an input from the client-side and storing it in the database. That’s what we implementing here.

For this, we need the multer, Multer is the library that allows your application to easily support the file upload.

Multer is a middleware in the NodeJs which is primarily used for uploading the files

Let’s start to build the API

Step-1: Project Structure

First, we will create the base directory which contains all project-related directories. Now create the src folder which contains the server-side specific file. So, the router, controller, DB, and models all are inside the src directory.

Check out my previous blog on how to setup a project from scratch.

Inside the src folder create new folders — controller, DB, middleware, models & router.

Now the project structure will look like this:

Directory Steup

Step-2: Initialize Project

We need to set up the package.json file by running the below command in the terminal inside the application directory:

$ npm init -y

Git Bash

npm init -y command will take default configuration like description, name and other config.

If you want to provide custom configuration use npm init and it will ask you to enter all the details manually.

Step-3: Installation of modules

$ npm i express multer body-parser mongodb mongoose dotenv

1. Express: Express is used as a web application framework.
2. Mongoose: The mongoose is used to connect the database with our project.
3. MongoDB: MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.
4. Body-parser: Extract the entire body portion of an incoming request stream and exposes it on req.body.
5. Multer: Multer is a middleware used for the file upload.

Step-4: Configure the model

First, we create the directory ./src/db/mongoose.js

Here we create a connection with the mongoose database.

Above 127.0.0.1:27017 is the localhost server and the image is the database name and mongoose.connection() is a function to connect the database.

Step-5: Create the model

In the model, we define the structure of the data.

We have structured the database inside the mongoose.Schema(). Our User model has one field image.

So, now create ./src/models/image.js & import the required modules.

Step-6: Create the service

Now, we are creating a separate class for the image upload which has a single image upload function and multiple image upload functions.

First, create the directory ./src/service/image.js up to the project root.

Single Image Upload

Now, we create and test the upload image API.

Step-7: Create the controller

Now we are going to create a controller which helps in getting the requested data from the model.

First, create the directory ./src/controller/userController up to the project root.

Step-8: Create the router

First, we create the file ./src/router/userRouter.js with the project root.

The above multer limit is used for limiting the size of the image this API will accepting 1MB images and dest provides the location where the uploaded image should be stored.

Multer is then added as middleware for the specific endpoint that should allow for file uploads. The route below is expecting a single image upload on sending the request.

Step-9: Create the index.js

Index.js is the main file of the project

Here, we going to import all the files of this project because the index handles all the startups and functions.

Step-10: Test your work

Here we are going to test our work.

First, we have to on the mongoose server. For this, we have to run the command in the terminal.

$ c:/Users/mongodb/bin/mongod.exe --dbpath c:/Users/mongodb-data

Now start the server then test API in the postman.

Result for a single image upload.

Database for a single image upload.

Multiple Image Upload

Now, we create and test the multiple-image upload API.

As we already made the service function above in the article.

Step-11: Update the controller

We are creating a controller for multiple images upload.

Step-12: Update the router

Now, route the request for multiple image uploads.

Step-13: Test Work

Now start the server then test API in the postman.

Result for multiple images upload.

Database for multiple images upload.

Summary

In this blog, we learned about single and multiple image uploads. Multer library is used to handle the different file uploads. It is used as a middleware for express and nodeJs to handle the multipart/form-data when the user uploads files. Here we make a class having a single image upload and multiple image upload functions. These functions are called in the controller and then the image path stored in the database.

In my next blog, we will see how to send and receive the mail in NodeJs.

Hopefully, this article will help you with image upload using NodeJs.

You can find the above code [here].