Home > DeveloperSection > Beginner > Upload and Download File in Node.JS

Upload and Download File in Node.JS

Node.JS Node JS 
6 Comment(s)
 12726  View(s)
Rate this:

Upload and Download File in Node.JS


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",





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")









     th File Name

     th Download



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



                font-family: "Monotype Corsiva";

                color: Black;





                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('/', routes);

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


// listen at port 3000


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


    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);






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



        title= title

        link(rel='stylesheet', href='/stylesheets/style.css')


        block content

// add jquery and global.js file




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


                                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!



Nice Article

By Ankita Pandey on   2 years ago
Nice article...

send source

By bilal mazhar on   one year ago
please upload source code of this example

Uploaded file does not appear in main page (index.jade)

By Rémi Carpentier on   9 months ago
Even if my file get uploaded, I can't see the file in the main page. Could you help? I've follow all the steps and I can't see why this is happening.

I got a question please reply me

By John VM on   2 months ago
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 


Does it works similarly to that of HTML5 Uploader?

Please reply ASAP.

download code not working

By Banamali Mishra on   2 months ago

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.



router is not defined

By Yss Nibode on   one month ago
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

Don't want to miss updates? Please click the below button!

Follow MindStick