Skip to content

natnaeltibebu/node-upload

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


| File Upload Using Multer in Node.js and Express |

Step 1 : Install nodejs in your system / Make workspace directory / Run follwoing comment

		mkdir file_upload
		cd  file_upload
		npm init --yes

Step 2 : Install Requred packages using NPM

		npm install --save express multer body-parser ejs
		npm install -g nodemon (optional - used to run app.js automatically while any file content changes)

Step 3 : Create app.js file and Add follwoing code in app.js

		touch app.js
	
		const path = require('path');
		const express = require('express');
		const ejs = require('ejs');
		const bodyParser = require('body-parser');
		
		const app = express();
		
		// Base index route
		app.get('/', function(req, res) {
			res.send('File Upload Using Multer in Node.js and Express');
		});

		// Server Listening
		app.listen(3000, () => {
			console.log('Server is running at port 3000');
		});
		
		nodemon app (OR) npm start

Setp 4 : Define view engin with ejs / public path / view files path / bodyParser

		//set views file
		app.set('views',path.join(__dirname,'views'));
		
		//set view engine
		app.set('view engine', 'ejs');
		app.use(bodyParser.json());
		app.use(bodyParser.urlencoded({ extended: false }));

Step 5 : Define and configure Multer Storage

		const multer = require('multer');
		
		// For Multer Storage
		var multerStorage = multer.diskStorage({
		  destination: function (req, file, callback) {
			callback(null, path.join(__dirname,'my_uploads'));
		  },
		  filename: function (req, file, callback) {
			callback(null, Date.now() + '_' + file.originalname);
		  }
		});
		
		// For Single File upload
		var multerSigleUpload = multer({ storage: multerStorage });
		
		// For Multiple File upload
		var multerMultipleUpload = multer({ storage: multerStorage }).array("multipleImage", 3);

Setp 6 : Define index path with '/' and HTML file

		//route for index page
		app.get('/',(req, res) => {
			res.render('file_upload_index', {
				title: 'File Upload Using Multer in Node.js and Express'
			});
		});

Step 7 : Define File Upload function in app.js

		//route for single fileupload
		app.post("/singleFile", multerSigleUpload.single('singleImage'), function(req, res) {
			const file = req.file
			if (!file) {
				return res.end("Please upload a file!");
			}
			res.redirect('/');
		});
		
		
		//route for multiple file upload
		app.post("/multipleFile", function(req, res) {
			multerMultipleUpload(req, res, function(err) {
				if (err) {
					return res.end("Files uploading unsucessfully!");
				}
				res.redirect('/');
			});
		});

Setp 8 : Run a server and check with Browser

		npm start (OR) nodemon app

		http://localhost:3000/

Step 9 : Define a image upload form with file input

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published