In this article, I’m explaining the concept of upload and download file in node.js. In this article create an express project to upload and download the file. 

First know that what is upload and download. Upload is a utility to upload your file one computer to another computer. Upload provides the facility to easily send data one place to another place.

Downloading is the utility to download a file from the network that means you receive the information from another computer.

Let’s create a sample to uploading and downloading in node.js: 

Step 1 Create an express project

 

First create an express project from command prompt as express command as like this:

After create express project install dependency. 

Step 2 Install Dependency

 

Now install the al dependency which is required. Let’s now see the dependency and add the package.json:

{

  "name":
"UploadAndDownload",
  "version":
"0.0.1",
  "private": true,
  "scripts": {
    "start": "node
./bin/www"
  },
  "dependencies": {
    "express":
"~4.2.0",
    "body-parser":
"~1.0.0",
    "jade":
"~1.3.0",

"connect":"~2.14.4"
  }
}

 

These all necessary package that work in the project. Now write in the package.json file and install it by npm install command. 

Step 3 Create User Interface and Styles

 

Let’s create the user interface that show how’s looking your program in the browser. You should this is create jade engine. Let’s open up the /views/index.jade file and create a form for upload and create a tablefor download. There are the following code that replace it in the index.jade file:

extends layout
block content
  h1= title
  p Welcome to #{title}
  form(method="post", action="/upload", enctype='multipart/form-data')
   input(type="file", name="image", id="image")
   input(type="submit", value="Upload", class="button-style")
   br
   span#message
  br
  br
  br
  div#download  table
    thead
     th File Name
     th Download
    tbody

 

That create your user interface. I’m also add /public/style.css file some style to improve the user interface:

h1
{
       font-family: "Monotype Corsiva";
    color: Black;
}
.button-style
{
      color: rgb(245, 245, 245);   background-color: rgb(34, 80, 226);
    height: 45px;
      width: 130px;
      border-radius: 5px;
      font-weight: bold;
}

This add for button and the heading to add style. If don’t add it then update the index.jade file a line code:

input(type="submit", value="Upload")

 

So application is ready. Let’s see that:

 

Let’s move on the coding part.

 

Step 4 Change in app.js

 

Let’s we only few things and very different normal express project to create the main file and run from the node app.js command. Let’s replace all code by the following code:

// add the modules
var express  = require('express');
var path = require('path');  // add path to set and get
var fs = require('fs');  // add filesystem
var connect = require('connect');
 
var app  = express();
var port = process.env.PORT || 3000; // run on the port 3000
 
 
var routes = require('./routes/index');
var users = require('./routes/users');
 
var app = express();
 
// view engine setup and directory name
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
//add comfoguration
app.use(express.static(__dirname + '/public'));
app.use(connect.cookieParser());
app.use(connect.logger('dev'));
app.use(connect.bodyParser());
app.use(connect.json());
app.use(connect.urlencoded());
 
app.use('/', routes);
app.use('/users', users);
 
// listen at port 3000
app.listen(port);
console.log('The Server runs on port ' + port);

 

This is necessary for the application. Let’s cod for upload. 

Step 5 Upload Code

 

Our index.js file handles all the HTTP requests such as GET, POST. We need to create our own routes to handle image upload and to view the image. We are importing the defined function using require(). The image upload is defined using POST method. When we receive the image in the server we write the image in uploads directory. To view the image file in browser we are defining a separate route with GET method, it reads the image from uploads directory and display it in browser.

 

Let’s add in the /views/index.js file:

var fs = require('fs');  
router.post('/upload', function(req, res) {
  var path=require('path'); // add path module
    fs.readFile(req.files.image.path, function (err, data){ // readfilr from the given path     var dirname = path.resolve(".")+'/uploads/'; // path.resolve(“.”) get application directory path     var newPath = dirname + req.files.image.originalFilename; // add the file name     fs.writeFile(newPath, data, function (err) { // write file in uploads folder     if(err){     res.json("Failed to upload your file");     }else {   res.json("Successfully uploaded your file"); }
}); });
});
router.get('/uploads/:file', function (req, res){   var path=require('path');     file = req.params.file;     var dirname = path.resolve(".")+'/uploads/';     var img = fs.readFileSync(dirname + file);     res.writeHead(200, {'Content-Type': 'image/jpg' });     res.end(img, 'binary'); });

 

By this we can easily upload all file either this was image or text files. Let’s move for downloadin. 

Step 6 Get All Files from uploads directory and Show in Table

 

It is necessary get files from any directory to give the download. Here, I give the uploads directory to all download files. Let’s add the code in the /views/index.js file:

router.get('/download', function(req, res) { // create download route
  var path=require('path'); // get path
  var dir=path.resolve(".")+'/uploads/'; // give path
    fs.readdir(dir, function(err, list) { // read directory return  error or list
    if (err) return res.json(err);
    else
                res.json(list);
                });
});

 

This get the all files that contains uploads folder. But how to show it in the table for downloads. There was the big problem but don’t worry. Let’s open your /views/layout.jade file and add the jquery file and global.js file.

doctype html
html
   head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
    body
        block content
// add jquery and global.js file

        script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')         script(src='/javascripts/global.js')

 

And after that create the global.js file in the /public/javascript/ location. Let’s create it with the given code:

// document ready call itself
$(document).ready(function(){
        populateTable(); // populateTable function

              }); // Add a function show files with in the table function populateTable() {     // Empty content string     var tableContent = ''; // it a variable     // jQuery AJAX call for JSON     $.getJSON( '/download', function( data ) { // get files as data             for(var item in data) { // one by one get and add fortable
              tableContent += '<tr>';                 tableContent += '<td>' + data[item] + '</td>'; // this file name column
              tableContent += '<td><a href='+'/'+data[item]+'>' + data[item]+ '</a></td>'; // this was the link column
          }
// this all added into the tableContent variable         $('#download table tbody').html(tableContent); // add into the table     }); };

This is load into the table all file with its links. 

Step 8 Download Code

 

This step to create the download file. This is the simple get the file and use res.download() method download it. Let’s add code in the /routes/index.js file:

// Add this route for download it

router.get('/:file(*)', function(req, res, next){ // this routes all types of file
  var path=require('path');
  var file = req.params.file;
  var path = path.resolve(".")+'/uploads/'+file;
  res.download(path); // magic of download fuction
});

By this code simply download file in the application. 

Step 9 Run Application 

Let’s ready for run with complete functionality. Now run the application by the node app.js command. Let’s see this:

 

Let’s upload a file:

Now click on the upload button it redirect in the upload route and give message successfully uploaded. Let’s check in the upload directory:

Now check the download let’s refresh the page it add the file for downloading. Let’s download it:

This fil was successfully download it. It’s working. 

I hope that this article is helpful for you. Thanks!

 

 

  Modified On Nov-24-2017 07:47:22 AM
  1. First of all Thank you for explaining it is a nice way. 
    I have a project where i have bulk upload of files
    Currently it is done by drag and drop of bunch of files into a HTML5 uploader and as it has to hit the IIS web server.
    Its taking time at the same time other windows application that dont use server is much quicker.

    So how can i solve this issue of performance... DOES NODEJS process the files through WEB SERVER 
    OR

    Does it works similarly to that of HTML5 Uploader?

    Please reply ASAP.

  1. Hi Anchal,

    I followed the procedures you have mentioned in this article for file upload and download.

    I am able to upload and download files, but the downloaded files are in different format(i.e.: with out extension). I am not able to use it. I renamed those files to appropriate format still it is not working.

    I am trying to upload and download .jpg ,.txt and .exe files.

    Kindly, help me in resolving the issues.

    Thanks

    Banamali

  1. it is telling me router is not defined
    router.post('/public/upload', function(req, res) {
    ^
    
    ReferenceError: router is not defined
        at Object.<anonymous> (C:\Users\onibo\WebstormProjects\untitled1\upload_download\routes\index.js:3:1)
        at Module._compile (module.js:409:26)
        at Object.Module._extensions..js (module.js:416:10)
        at Module.load (module.js:343:32)
        at Function.Module._load (module.js:300:12)
        at Function.Module.runMain (module.js:441:10)
        at startup (node.js:139:18)
        at node.js:968:3

Leave Comment