Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Learn to Build How to Upload Multiple Files Using NodeJS


In this article, we are going to build an application that is used to Upload Multiple Files or images. We are also going to used Nodejs, Expressjs and basic syntax of html to design our front page as well as if you uploaded multiple files it will be saved in your project folder. In this project, we are also going to use Multer.

Steps for Installation:
For developing this app, we need NodeJS, ExpressJS and Multer.
Firstly, we are going to install Nodejs. To download the setup file, you have to visit the following link: Open this link, download the setup according to your Operating System, and install it.

Once you are done with the installation, open Command prompt as Run as administrator and type the following command to check your Node version.
Secondly, we are going to install Expressjs. To install it, click on the following link Once the page is on Getting Started, and then on Installation. You will be able to see some steps listed on the page Follow the steps and complete the installation of ExpressJS.

Now, it time to start with our actual project. We are going to create a project using expressjs. I named my folder as uploading.
Open your created application folder and find the Package.json file. Open the file and make sure that it looks like this, if not then add this code in your package.json file.
Once, you are done with the json, run the following command:
After the successful installation of NPM, we are going to run our project. There are two commands that we can run:
You can use one of these commands to run your project. Once you fire the command, go to your browser and type localhost:3000 you will get the following output:

Steps for Implementation:
Now, are going to design our front page using HTML, for this we will need to create the index.ejs file in our view folder and add the following code:

Upload Files/Images

Now, we are going to add a function to our app.js file. It will prompt you with a message if your application doesn’t have any errors. After that, you have to change the jade file to ejs. I’ve made the changes bold, so your app.js file look like this:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();
	console.log("App is started on port number 3000 and enjoy!")
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error ='env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);

module.exports = app;

Now, we need to addl Multer. Refer the following link Open this link and run the following command in your command prompt.
You will also need to add the following code in your routes->index.js file.

var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })

Once you added the code, you have to create uploads folder in public folder.
Now, we have to save the images/files in the uploads folder. For this add the following code in your index.js so it looks like:

var express = require('express');
var router = express.Router();
var multer = require('multer');
var storage = multer.diskStorage({
	filename: function(req,file,cb){
		cb(null, + file.originalname);

var upload = multer({ storage:storage });

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });

module.exports = router;

After adding the code, just restart your app using node app/npm start command. You will get the following output in command prompt:
Now go to your browser, you will get the following output:
When you save your images or documents, it will save the names like:
Once you click on submit, you will get the detailed information about the uploaded file. I’ve attached the output:
Now, you can see the uploaded file in uploads folder like:

I hope this has been helpful for you guys in understanding a how to upload multiple images/files using Node.JS.

The post Learn to Build How to Upload Multiple Files Using NodeJS appeared first on | Blog.

This post first appeared on How And When Should You Use HBase NoSQL DB, please read the originial post: here

Share the post

Learn to Build How to Upload Multiple Files Using NodeJS


Subscribe to How And When Should You Use Hbase Nosql Db

Get updates delivered right to your inbox!

Thank you for your subscription