How to upload file with Express,Pug and Multer in Node.js

TL;DR;

In this blog post, We are going to learn how to upload a file with Express, Pug, and Multer in Node.js. In this blog post, we will learn how we can upload file with multer middleware in express framework with node.js

Creating Express App, Multer and other common code:

So here in for the demo purpose, we are going to use express application. So here is our package.json for express framework node.js application. It is created via the express generator. I have added Multer and PUG NPM instead of Jade.

{
  "name": "nodejsfileupload",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "morgan": "~1.7.0",
    "multer": "^1.2.1",
    "pug": "2.0.0-beta6",
    "serve-favicon": "~2.3.0"
  }
}

Here in the above code, You can see that there are pug npm and multer npm. Once you do “NPM Install” it will install all the required NPM for the same. Now we are our standard express app ready and here’s how our structure looks in visual studio code.

node-js-structure-express-app-file-upload-node-js

What is Multer:

For those who don’t know what is Multer,

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

It is a middleware that will help you handle multipart/form-data requests and you can upload the file with that middleware with some configuration code.You can find more information about Multer at - https://github.com/expressjs/multer

Common code for Multer:

Now once we are done with Installing node module, It’s time to write some common code for Multer middleware. Here in the above code, we are going to use the index.js router which is a default router for the express app. The index.js code looks like following.

var express = require('express');
var router = express.Router();

//multer object creation
var multer  = require('multer')
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'public/uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
  }
})

var upload = multer({ storage: storage })

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.post('/', upload.single('imageupload'),function(req, res) {
  res.send("File upload sucessfully.");
});

module.exports = router;

Here in the above code, you can see that first I’m creating a multer object with require syntax and then I have put some configuration with multer.diskstorage. Basically, It's said that we are going to store the uploaded files into public/uploads folder and the name of a file will be same which we uploaded. Then in post request, you can see that I have put “upload.single” which handle file upload with post request. And if it uploaded successfully, I’m sending a response back that file is upload successfully.

HTML/PUG code:

Following is an HTML code for the pug.

extends layout

block content
  h1= title
  p Welcome to #{title}
  form(method='post', enctype='multipart/form-data')
    input(type='file', name='imageupload')
    input(type='submit', name='uploadimage', value='Upload Image')

Here you can see I have a file upload control with multi-part data and form and submit button to make a post request.

Final Output:

Once you run this application in the browser it will look like following.

That’s it. It’s pretty easy. Hope you like it. Stay tuned for more!.

You can find complete source code following example on Github at - https://github.com/dotnetjalps/NodeJsFileUpload

DotNetJalps