---
title: "Upload and Download File in Node.JS"  
description: "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 t"  
author: "Anchal Kesharwani"  
published: 2014-09-20  
updated: 2020-08-06  
canonical: https://www.mindstick.com/articles/1499/upload-and-download-file-in-node-js  
category: "node.js"  
tags: ["node js"]  
reading_time: 7 minutes  

---

# 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:

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/2d8a7747-67f1-4507-9d30-ae5f01a1db0f.png)

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 layoutblock 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:

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/7bca7058-3bcb-4874-b71d-c8e1b3b3bed1.png)

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 modulesvar express  = require('express');var path =
require('path');  // add path to set and
getvar fs =
require('fs');  // add filesystemvar 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 nameapp.set('views',
path.join(__dirname, 'views'));app.set('view
engine', 'jade'); //add comfogurationapp.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
3000app.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:

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/519dd6a7-f2d9-424d-ab74-8c29767deaee.png)

Let’s upload a file:

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/3367ffcc-ce7a-4dd0-a060-c26fa57f5190.png)

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

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/e99e247d-689f-43fc-8f81-58ed22d2fe2c.png)

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

![Upload and Download File in Node.JS](https://www.mindstick.com/mindstickarticle/5327b0f1-2d29-4c9b-b031-04b397107300/images/2dd0c6c4-b6ef-4acb-96cb-69ae55c731d7.png)

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

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

---

Original Source: https://www.mindstick.com/articles/1499/upload-and-download-file-in-node-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.