CSV Explorer with Node.js, Express.js and ejs
In this article, we will be exploring how to build a CSV Explorer using Node.js, Express.js and ejs. CSV Explorer is a web application that allows users to upload and explore CSV files.
Setting up the project
First, let’s create a new Node.js project and install the necessary dependencies:
$ mkdir csv-explorer
$ cd csv-explorer
$ npm init -y
$ npm install express multer ejs csv-parser
Creating the server
Next, let’s create a new file called server.js and set up our Express server:
const express = require('express');
const multer = require('multer');
const csvParser = require('csv-parser');
const fs = require('fs');
const app = express();
const port = 3000;
// set the view engine to ejs
app.set('view engine', 'ejs');
// configure multer for file upload
const upload = multer({ dest: 'uploads/' });
// define a route to handle file upload
app.post('/upload', upload.single('csv'), (req, res) => {
const results = [];
fs.createReadStream(req.file.path)
.pipe(csvParser())
.on('data', (data) => results.push(data))
.on('end', () => res.render('explore', { data: results }));
});
app.get('/', (req, res) => {
res.render('index');
});
// start the server
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Creating the views
Now, let’s create the ejs views for our application. Create a new folder called views and add two ejs files: index.ejs and explore.ejs.
<!DOCTYPE html>
<html>
<head>
<title>CSV Explorer</title>
</head>
<body>
<h1>CSV Explorer</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="csv" accept=".csv">
<input type="submit" value="Upload">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>CSV Explorer - Explore</title>
</head>
<body>
<h1>Explore CSV Data</h1>
<table>
<thead>
<tr>
<% Object.keys(data[0]).forEach((key) => { %>
<th><%= key %></th>
<% }); %>
</tr>
</thead>
<tbody>
<% data.forEach((row) => { %>
<tr>
<% Object.values(row).forEach((value) => { %>
<td><%= value %></td>
<% }); %>
</tr>
<% }); %>
</tbody>
</table>
</body>
</html>
Running the application
Finally, start the server by running the following command:
$ node server.js
Visit http://localhost:3000 in your browser and you should see the CSV Explorer application. You can upload a CSV file and explore the data in a tabular format.
That’s it! You have successfully built a CSV Explorer using Node.js, Express.js and ejs. Happy coding!
