Upload images by nodejs and multer

Introduction

When working with the APIs , the need for uploading images and file sometimes is necessary and commonly used in APIs to upload images in form. For this need , we can use third party library from node package manager Multer .

Multer is a node.js middleware for handling multipart/form-data , which is primarily used for uploading files.

First Step

Fist step , is to create a node.js app and install express by writing a command npm i express in the terminal with the specified path you want to create a project.

Second Step

Now , the node modules and package-lock-json is installed by installing express . So, to install package json , the command  "npm init -y"  need to run in the terminal.

The basic setup of node.js app where on some port app is listening on the localhost and one basic route will be there to check if app is running with the get API.

So, here is the example how to setup basic node.js app with the express.

Third Step

After the basic setup of app, now we can begin our multer installation into the express app and start coding into it . We can install multer by writing "npm install multer".

In this example, we require the multer package into our express app and only then we can use it and start uploading images from our form.

Here, we first have to setup the configuration of multer where the multer has the in-built function diskStorage which takes the object as the parameter and has the properties namely destination and filename.

The first property named destination is used to specify where you want to store images in your file . In this example , the images will be stored in the images folder.

The destination property is the function which returns the callback function , and in the callback function you have to specified the path where you want to store images of your form 

The second property named filename is used to specify of which filename , the images will be stored . Here we are using the file object , that will be provided to us in the function and with the use of file object property , we can uniquely named our files. The images should be uniquely because if the user upload the file with the same name , it will be overwritten and the images could be lost. That's why we should store images with the unique name in the destination folder.

Then, the configuration storage object will be set to the multer middleware and the upload variable will be used as a middleware which has the several methods to store files whether single or multiple images.

We can use upload middle ware to store images in the destination folder with the unique name.

Fourth Step

So , here we are showing the usage of the upload middleware in the API and how will you integrate multer with the API , the single is the object of the upload middleware and the specified name is the name of the field from where we will store images by multer.

We will use postman to store images and specified the fieldname images. Let's go to the postman the upload the image .

 

The Content-Type must be multipart/form-data , only then the images will be uploaded by multer. 

The images is the field name which is provided above in the upload middleware , we will select the form-data and and select the file and send the request from the postman.

After sending request we get the desired result and our image will be stored in the destination folder.

Here, in this example we can see the file object that is uploaded from postman and the image is successfully uploaded at the specified path .

Thank you for reading the blog post!