Node js Upload CSV File to Mongodb Database

Node js Upload CSV File to Mongodb Database

Upload CSV file to MongoDB mongoose + node js + Express; Through this tutorial, you will learn how to upload/import CSV file data into MongoDB in Node js + Express. 

Import csv file to mongodb using node js + express tutorial, you will also learn how to upload csv file into Node js + express app. Then read csv file data using npm CSVTOJSON package and import it in mongodb database with node js + express app.

How to Upload/Import csv File in Mongodb using Node js + Express

Follow the below steps and import/upload CSV file to mongodb using node js + Express:

  • Step 1 – Create Node Express js App
  • Step 2 – Install express ejs body-parser mongoose CSVTOJSON Multer Modules
  • Step 3 – Create Model
  • Step 4 – Create CSV File Upload HTML Markup Form
  • Step 5 – Import Modules in App.js
  • Step 6 – Start App Server

Step 1 – Create Node Express js App

Execute the following command on terminal to create node js app:

mkdir my-app
cd my-app
npm init -y

Step 2 – Install express ejs body-parser mongoose CSVTOJSON Multer Modules

Execute the following command on the terminal to express ejs body-parser mongoose dependencies :

npm install -g express-generator
npx express --view=ejs


npm install csvtojson mongoose multer body-parser 

body-parser – Node.js request body parsing middleware which parses the incoming request body before your handlers, and make it available under req.body property. In other words, it simplifies the incoming request.

Express-EJS– EJS is a simple templating language which is used to generate HTML markup with plain JavaScript. It also helps to embed JavaScript to HTML pages

Mongoose – Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment. Mongoose supports both promises and callbacks.

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.

CSVTOJSON –  A tool concentrating on converting csv data to JSON with customised parser supporting.

Step 3 – Create Model

Create Models directory and inside this directory create studentModel.js file; Then add following code into it:

var mongoose  =  require('mongoose');  
  
var csvSchema = new mongoose.Schema({  
    FirstName:{  
        type:String  
    },  
    LastName:{  
        type:String  
    },  
    SSN:{  
        type:String  
    },  
    Test1:{  
        type:Number  
    },  
    Test2:{  
        type:Number  
    },  
    Test3:{  
        type:Number  
    },  
    Test4:{  
        type:Number  
    },  
    Final:{  
        type:Number  
    },  
    Grade:{  
        type:String  
    }  
});  
  
module.exports = mongoose.model('studenModel',csvSchema);  

Step 4 – Create CSV File Upload HTML Markup Form

Create file/image upload Html form for upload image or file in mongoDB database; So visit views directory and create index.ejs file inside it. Then add the following code into it:

<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta http-equiv="X-UA-Compatible" content="ie=edge">  
<title>node js upload csv file to mongodb - tutsmake.com</title>  
<link rel="stylesheet" href="/css/bootstrap.min.css">  
</head>  
<body>  
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">  
<a class="navbar-brand" href="#">CsvToMongo</a>  
</nav>  
<div class="container">  
<div class=" nav justify-content-center" style="margin-top:100px;">  
<div class="card border-warning mb-3 " style="max-width: 20rem;">  
<div class="card-header"><h5>Upload csv file</h5></div>  
<div class="card-body">  
<form action="/" method="post" enctype="multipart/form-data">  
<input type="file" name="csv"><br><br>  
<div class="text-center"><button type="submit" class="btn btn-lg btn-primary">submit</button></div>     
</form>  
</div>  
</div>  
</div><br>  
<%if(data){%>  
<div>  
<table class="table table-hover table-responsive table-stripped  nav justify-content-center" style="width: auto" >   
<thead>  
<tr class="bg-primary">  
<th>S.no</th>  
<th style="padding-right: 1em">LastName</th>  
<th style="padding-right: 1em">FirstName</th>  
<th style="padding-right:2em;padding-left:2em;">SSN</th>  
<th>Test1</th>  
<th>Test2</th>  
<th>Test3</th>  
<th>Test4</th>  
<th>Final</th>  
<th>Grade</th>  
</tr>  
</thead>  
<tbody style="overflow-x: scroll; height:350px;" class="table-bordered">  
<%for(var i=0;i< data.length;i++){%>  
<tr class="text-center">  
<td ><%= i+1%></td>  
<td style="padding-right: 1em"><%= data[i].LastName%></td>  
<td style="padding-left: 1em;"><%= data[i].FirstName%></td>  
<td style="padding-right:1em;padding-left:1em;"><%= data[i].SSN%></td>  
<td style="padding-left: 1em"><%= data[i].Test1%></td>  
<td style="padding-left: 1em"><%= data[i].Test2%></td>  
<td style="padding-left: 1em"><%= data[i].Test3%></td>  
<td style="padding-left: 1.2em"><%= data[i].Test4%></td>  
<td style="padding-left: 1.2em"><%= data[i].Final%></td>  
<td style="padding-left: 1.2em"><%= data[i].Grade%></td>  
</tr>  
<%}%>  
</tbody>  
</table>  
</div>  
<%}%>  
<br>  
</body>  
</html>  

Step 5 – Import Modules in App.js

Import express, body-parser, mongoose, multer dependencies in app.js; as shown below:

var express     = require('express');  
var mongoose    = require('mongoose');  
var multer      = require('multer');  
var path        = require('path');  
var csvModel    = require('./models/csv');  
var csv         = require('csvtojson');  
var bodyParser  = require('body-parser');  
var storage = multer.diskStorage({  
destination:(req,file,cb)=>{  
cb(null,'./public/uploads');  
},  
filename:(req,file,cb)=>{  
cb(null,file.originalname);  
}  
});  
var uploads = multer({storage:storage});  
//connect to db  
mongoose.connect('mongodb://localhost:27017/csvdemos',{useNewUrlParser:true})  
.then(()=>console.log('connected to db'))  
.catch((err)=>console.log(err))  
//init app  
var app = express();  
//set the template engine  
app.set('view engine','ejs');  
//fetch data from the request  
app.use(bodyParser.urlencoded({extended:false}));  
//static folder  
app.use(express.static(path.resolve(__dirname,'public')));  
//default pageload  
app.get('/',(req,res)=>{  
csvModel.find((err,data)=>{  
if(err){  
console.log(err);  
}else{  
if(data!=''){  
res.render('demo',{data:data});  
}else{  
res.render('demo',{data:''});  
}  
}  
});  
});  
var temp ;  
app.post('/',uploads.single('csv'),(req,res)=>{  
//convert csvfile to jsonArray     
csv()  
.fromFile(req.file.path)  
.then((jsonObj)=>{  
console.log(jsonObj);  
//the jsonObj will contain all the data in JSONFormat.
//but we want columns Test1,Test2,Test3,Test4,Final data as number .
//becuase we set the dataType of these fields as Number in our mongoose.Schema(). 
//here we put a for loop and change these column value in number from string using parseFloat(). 
//here we use parseFloat() beause because these fields contain the float values.
for(var x=0;x<jsonObj;x++){  
temp = parseFloat(jsonObj[x].Test1)  
jsonObj[x].Test1 = temp;  
temp = parseFloat(jsonObj[x].Test2)  
jsonObj[x].Test2 = temp;  
temp = parseFloat(jsonObj[x].Test3)  
jsonObj[x].Test3 = temp;  
temp = parseFloat(jsonObj[x].Test4)  
jsonObj[x].Test4 = temp;  
temp = parseFloat(jsonObj[x].Final)  
jsonObj[x].Final = temp;  
} 
//insertmany is used to save bulk data in database.
//saving the data in collection(table)
csvModel.insertMany(jsonObj,(err,data)=>{  
if(err){  
console.log(err);  
}else{  
res.redirect('/');  
}  
});  
});  
});  
//assign port  
var port = process.env.PORT || 3000;  
app.listen(port,()=>console.log('server run at port '+port));  

Step 6 – Start App Server

You can use the following command to start node js app server:

//run the below command
npm start
after run this command open your browser and hit 
http://127.0.0.1:3000/

Conclusion

Upload/Import CSV file to MongoDB mongoose + node js + Express; Through this tutorial, you have learned how to upload/import CSV file data into MongoDB in Node js + Express. 

Recommended Node JS Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

One reply to Node js Upload CSV File to Mongodb Database

  1. That’s really nice post. I appreciate your skills, Thanks for sharing.

Leave a Reply

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