{"id":17498,"date":"2021-04-02T08:01:28","date_gmt":"2021-04-02T08:01:28","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=17498"},"modified":"2026-02-05T05:57:00","modified_gmt":"2026-02-05T05:57:00","slug":"node-js-multer","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/node-js-multer","title":{"rendered":"Mastering File Uploads in Node.js and Express.js [2026 Tutorial]"},"content":{"rendered":"

Introduction<\/h2>\n

File upload is the most basic operation for any application. Regarding Node, file upload with Multer in Node.js and Express is efficient and seamless. It is designed to simplify handling incoming files and efficiently store, receive, and upload it.<\/p>\n

Today we will discuss and learn about file uploading in Nodejs Multer. Also, we will see how to upload images\/videos using Multer in node js and express. Let\u2019s begin our tutorial and learn about node js Multer<\/b> file upload.<\/p>\n

What is Multer in Nodejs?<\/h2>\n

Node js Multer<\/i> is a middleware in node.js that handles multipart\/form-data, which is principally used for uploading files. It is written on top of the busboy for maximum efficiency.<\/p>\n

As a result, Multer makes the process of uploading files in Nodejs easier. It is an NPM package that tackles the complexities of file handling by integrating the middleware stack of Node applications. <\/p>\n

Additionally, it allows renaming files, setting sizes, different types, and filtering files. <\/p>\n

Steps-by-step tutorial of File Upload Using Multer in Node.js and Express<\/h2>\n

how to use multer in node js?
\nFollowing is the step-by-step guide to learning about how to upload Node Multer files. <\/p>\n

Initial Setup<\/h3>\n

Create a directory<\/u><\/b><\/p>\n

mkdir MulterApp\r\ncd MulterApp<\/pre>\n
Define package.json file<\/u><\/b><\/p>\n
For creating one, run this command:<\/p>\n
npm init<\/pre>\n
Install dependencies<\/h3>\n
We only have two dependencies to be installed- Express and Multer. So here are the commands
\nTo install Express-<\/u><\/b><\/p>\n
npm install express --save<\/pre>\n
To install Multer-<\/u><\/b>
\nhow to install multer in node js?<\/p>\n
npm install --save multer<\/pre>\n
Now, it\u2019s time to code. <\/p>\n
First of all, create a file<\/u> and name it anything; here it is app.js.<\/em><\/strong> I\u2019ll be coding the entire code in app.js<\/em> to keep it simple for you. Further, loading the express module<\/u> with the help of  require()<\/strong> and then, at last, writing the below-mentioned code for setting up the basic express server<\/u><\/p>\n
\/\/app.js<\/b><\/p>\n
const express = require('express');\r\nconst path = require('path');\r\nconst app = express()\r\nconst port = process.env.PORT || 3000\r\napp.get(\u2018\/\u2019, (req, res) => { \r\n    res.send(\u2018Hello People\u2019); \r\n});\r\napp.listen(port, () => {\r\n    console.log('Server is up on port ' + port);\r\n})\r\n<\/pre>\n
Run this command to verify-<\/p>\n
node app.js<\/pre>\n
Hit http:\/\/localhost:3000<\/strong>, and you should see \u201cHello People<\/b>\u201d in your window. <\/p>\n
\"hello-people\"<\/p>\n
Adding Multer<\/h3>\n
For simplicity purpose, I\u2019ll store all the uploaded files in the local folder. Write the below-mentioned code for loading multer in our app.js file<\/p>\n
const multer = require(\u2018multer\u2019);<\/pre>\n
Multer Storage for Single Image Upload<\/h3>\n
Now, the next thing to be implemented is to define a storage location for all the files. Multer made it easy by providing an option to store our files to disk. We will set up a directory to save all the files and provide them a new identifier.<\/p>\n
Create a folder- images<\/em><\/b>, in the root directory.<\/p>\n
\/\/ Image Upload<\/b><\/p>\n
const imageStorage = multer.diskStorage({\r\n    \/\/ Destination to store image     \r\n    destination: 'images', \r\n      filename: (req, file, cb) => {\r\n          cb(null, file.fieldname + '_' + Date.now() \r\n             + path.extname(file.originalname))\r\n            \/\/ file.fieldname is name of the field (image)\r\n            \/\/ path.extname get the uploaded file extension\r\n    }\r\n});\r\n<\/pre>\n
Destination <\/em><\/b>– Destination is used so that the application can know where to store images. It can be a string (e.g. \u2018.\/upload\u2019). The default directory for all the temporary files is used if the destination is unavailable. Creating a directory is compulsory when you use the destination as a function. Or else, if you use destination as string, Multer will create directory.<\/p>\n
Filename<\/em><\/b> – Filename determines what a file should be named in the folder.
\nA random file name with no extension will be given if you don\u2019t provide the file\u2019s name. The function takes three parameters – the request object, the file object, and a callback function. The two arguments to the <\/p>\n
    \n
  • null: as we aren\u2019t showing an error.<\/li>\n
  • file.originalname \u2013 in this demo, I have used the same file name as they are uploaded. You can choose any name.<\/li>\n<\/ul>\n
    We have used the Multer() method method in the below-mentioned snippet- <\/p>\n
    const imageUpload = multer({\r\n      storage: imageStorage,\r\n      limits: {\r\n        fileSize: 1000000 \/\/ 1000000 Bytes = 1 MB\r\n      },\r\n      fileFilter(req, file, cb) {\r\n        if (!file.originalname.match(\/\\.(png|jpg)$\/)) { \r\n           \/\/ upload only png and jpg format\r\n           return cb(new Error('Please upload a Image'))\r\n         }\r\n       cb(undefined, true)\r\n    }\r\n}) \r\n<\/pre>\n
    The Multer() method method takes an object with storage property,
    \nThe limits<\/em><\/b> property describes the maximum size of the file.<\/p>\n
    The fileFilter<\/em>()<\/b> method is for security reasons. I have validated files before it is uploaded to the servers. Here, it will accept only two extensions – .png and .jpg.<\/p>\n
    After this, it\u2019s time to create the post route. We will make a POST request to localhost:3000\/uploadImage.<\/em><\/b>
    \nAdd the following code in the app.js-<\/em><\/p>\n
    \/\/ For Single image upload\r\nrouter.post('\/uploadImage', imageUpload.single('image'), (req, res) => {\r\n     res.send(req.file)\r\n}, (error, req, res, next) => {\r\n     res.status(400).send({ error: error.message })\r\n})\r\n<\/pre>\n
    I have used imageUpload.single(\u2018image\u2019)<\/b> for uploading a single file. As mentioned earlier, the multer adds a file object to the request. The file object has metadata of the file.<\/p>\n
    Here inside the single() method, we have passed the field name. The same field name we will pass in Postman.
    \nTo test the endpoint, open Postman.<\/p>\n