Hello friends, In this tutorial, We would see how to upload File in Node.Js using Multer. Multer is a Node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

After Completing this tutorial you will be able to understand:

  • How to Upload File in Node.Js

What you’ll do?

  • Setup dependencies and NPM packages.
  • Create an HTML file from where the user will upload the file.
  • Create a Node.Js file that will upload the file using the dependencies.

NPM packages required for development:

  • Express.
  • Multer .
  • Body-parser.

Let’s understand each of the above packages in brief.

Express:

As per the Express Team, Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

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. You can find out more about the multer package here.

Body-parser:

body-parser is an npm plugin for Express that we need to use in order to be able to capture data coming via a form. Express used to have this functionality built-in but in order to achieve easier maintenance body-parser has been removed from the core of Express.

Setup Dependencies:

Open the Node.Js Command prompt and run the following to create a directory and move to the directory.

mkdir FileUploadDemo

cd FileUploadDemo

Run the following command for initializing the application.

npm init

Answer the question and proceed. Package.json file will be created in your project directory.

Run the following command to install express.

npm install express --save

Run the following command to install Multer.

npm install multer --save

Run the following command to install body-parser.

npm install body-parser

package.json

Your package.json file should look like this.

{
"name": "fileuploaddemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.16.3",
"multer": "^1.4.0"
}
}

Create HTML File:

Create a HTML file called index.html and write the following code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Upload images to server using Node JS</title>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/jquery.form.min.js"></script>
</head>
<body>
<form id="frmUploader" enctype="multipart/form-data" action="api/Upload/" method="post">
<input type="file" name="imgUploader" multiple />
<input type="submit" name="submit" id="btnSubmit" value="Upload" /> </form>
</body>
</html>

Create a Node.Js file and use the Dependencies:

var Express = require('express');
var multer = require('multer');
var bodyParser = require('body-parser');
var app = Express();
app.use(bodyParser.json())
var Storage = multer.diskStorage({
destination: function(req, file, callback) {
callback(null, "./Images");
},
filename: function(req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({
storage: Storage
}).array("imgUploader", 3); //Field name and max count
app.get("/", function(req, res) {
res.sendFile(__dirname + "/index.html");
});
app.post("/api/Upload", function(req, res) {
upload(req, res, function(err) {
if (err) {
return res.end("Something went wrong!");
}
return res.end("File uploaded sucessfully!.");
});
});
app.listen(5000, function(a) {
console.log("Listening to port 5000");
});

Create a Folder named Images in project directory.

run the application using the following URL:

http://localhost:5000/

View More:

Conclusion:

I hope you understand how to Upload file in Node.js. I would like to have your feedback, comments and suggestions are welcome to me.

Thank You.

Leave a Comment