Upload And Download File In Node

Here we will use multer middleware for uploading file. Click the link to know what is multer.

Setup The Project Folder

• create a new folder using console/terminal.
• open console/terminal type mkdir followed by the folder name you want to give.
• change to that folder by typing cd folder name.

Setup Node For The Project

• now type npm init on console/terminal.

• the npm init will create a package.json file.But we can create it manually too.
• just open the folder and add a new file and name it package.json and then we can structure it the same way as its been structured when using npm init.
• the package.json will look like this.

• now we will install packages for our project using npm install followed by package names we want to install.
• the following packages will be installed express ejs body-parser multer mongoose.

• this will generate a folder name node_modules which will contain all the node packages.
• after the package installation  the package.json will look like this. 

• now add a new file named it app.js.
• now go back to package.json file and in scripts write start :app.js.
• this will be the application entry point.

• make new folders 1) views and 2) public.
• in views add a file home.ejs.
• here we using .ejs  extension for views file because the template engine we are using is ejs.
• now in public folder make a new folder uploads.
• the uploaded files will be stored in the uploads folder.

app.js

	var express = require('express');
	var bodyParser = require('body-parser');
	var multer = require('multer');
	var mongoose = require('mongoose');
	var path = require('path');
	var app = express();
	var storage = multer.diskStorage({
	destination:function(req,file,cb){
	cb(null,'./public/uploads')
	},
	filename(req,file,cb){
	cb(null,file.originalname)
	}
	})
	var upload = multer({storage:storage});
	mongoose.connect('mongodb://localhost:27017/pics',{useNewUrlParser:false})
	.then(()=>console.log('connect')).catch(err=>console.log(err))
	// making the collection(table) schema
	// it contain picspath file for saving the file path
	var picSchema = new mongoose.Schema({
	picspath:String
	})
	//collection schema will be save in db by name picsdemo
	// picModel contain the instance of picdemo by which it can manipulate data in it.
	var picModel = mongoose.model('picsdemo',picSchema)
	app.set('view engine','ejs');
	app.set("views",path.resolve(__dirname,'views'));
	var picPath = path.resolve(__dirname,'public');
	app.use(express.static(picPath));
	app.use(bodyParser.urlencoded({extended:false}))
	app.get('/',(req,res)=>{
	picModel.find((err,data)=>{
	if(err){
	console.log(err)
	}
	if(data){
	console.log(data)
	res.render('home',{data:data})
	}
	else{
	res.render('home',{data:{}})
	}
	})
	})
	app.post('/',upload.single('pic'),(req,res)=>{
	var x= 'uploads/'+req.file.originalname;
	var picss = new picModel({
	picspath:x
	})
	picss.save((err,data)=>{
	if(err){
	console.log(err)
	}
	else{
	console.log('data',data)
	res.redirect('/')
	}
	})
	})
	app.get('/download/:id',(req,res)=>{
	picModel.find({_id:req.params.id},(err,data)=>{
	if(err){
	console.log(err)
	}
	else{
	var path= __dirname+'/public/'+data[0].picspath;
	res.download(path);
	}
	})
	})
	const port = process.env.PORT || 3000 ;
	app.listen(port,()=>console.log(`server running at ${port}`))
	module.exports = app;

view raw app.js hosted with ❤ by GitHub

1. mongoose.connect() - will setup the connection with local db on our system.
2. localhost:27017/pics - pics is name of our database which will be created on server when we insert data in it.
3. app.set("views",path.resolve(__dirname,"views")) - this tell express where views folder is.
4. app.set("view engine","ejs") - this tells express that any file ending in .ejs should be rendered with ejs packages..
5. express.static() - to serve static files such as images, CSS files, and JavaScript files, we using this middleware function.
6. bodyParser - for fetching form data from the coming request.
7. mongoose.Schema({}) - it contains the fields of our collection(table).
8. mongoose.model() - it contains collection(table) name and the object containing collection(table) the field data.
9. upload.single('pic') - in this we have to provide the same name of the name attribute which we used to upload the file.pic is the same name which is given in the name attribute . <input type="file"name="pic">. 

 Views

• home.ejs

	<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>Document</title>
	</head>
	<body>
	<h2>Upload Files</h2>
	<form action="/" method="POST" enctype="multipart/form-data">
	<input type="file" name="pic"><br>
	<input type="submit" value="Upload">
	</form><br><br><br><br>
	<h2>Download Files</h2>
	<table>
	<thead>
	<tr>
	<td>
	image
	</td>
	<td>
	download
	</td>
	</tr>
	</thead>
	<tbody>
	<% for(var i=0; i < data.length > 0; i++) {%>
	<tr>
	<td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
	<td>
	<form action="/download/<%= data[i]._id %>" method="GET">
	<input type="submit" value="Download">
	</form>
	</td>
	</tr>
	<% } %>
	</tbody>
	</table>
	</body>
	</html>

view raw home.ejs hosted with ❤ by GitHub