In this post, we are going to know about File Upload Using Multer in Node.js and Express and it also helps us to understand about file handling. For this process following packages are used Express, Multer, and Body-parser.

Step 1: Install nodeJs package and Init application

Initially download NodeJS and install it in your system and confirm everything configured correctly using the following command.

Step 2: Create a directory and init application

Create an application folder and init the project using the following command.

Step 3: Install required packages using NPM

The following modules are going to be required to create the application.

  • Express: Express is a least and adjustable Node.js web application framework that gives a strong collection of features for web and mobile applications. Express gives a light layer of basic web application benefits, without covering Node.js benefits that you agree and like.
  • body-parser: used to parse incoming requests from the end client.
  • ejs: is a templating engine and its used to render HTML pages to end client
  • Multer: Multer is a Node.js middleware for managing multipart/form-data, which is essentially used to uploading files and images.
  • nodemon: Optional package and Installed globally. It helps us to listen for modifications to files and automatically restart the app server.

Run the following command to install the above mention modules as dependencies for our application.

Step 4: Create app.js file

Create app.js server file and include the required dependency package in it for our file upload application. And define the server port and write an app server .listen() function.

Create app.js file

include following code

Run app.js using following comment

Step 5: Define View engine with ejs / public path / View files path

Here we are going to define a template view engine with ejs using set() and use() function and also define a Public path and View folder path location.

Step 6: Define and configure Multer Storage

In this step, we are going to create Multer storage that states where and how the uploading files and images should be stored.

Step 7: Define index path with ‘/’ and HTML file

Here we are going to define the HTML page with ejs extension and adding HTML content in it. We created four HTML files for file upload operation. I am going to create a file with named as file_upload.js

Index route Request handler

For Single File upload

For Multiple File upload
Final and full HTML page

Step 8: Define File Upload function in app.js

Here we are going to add the Home path and define the file upload page with displaying form information in it.

For Single File upload
For Multiple File upload
Step 9: Run a server and check with Browser

Here we are going to run an application with the following command to test our File upload application in a browser.

Finally app.js file code following details.

Run the Application using the following command.

Now you are ready to see the demonstration of File Upload Using Multer in Node.js and Express.

Download  Git Repository

 

Leave a Reply

Your email address will not be published. Required fields are marked *