How to upload file with progress bar using Node.js ?

Last Updated : 30 Jun, 2022

File Upload in NodeJS means to move files from the client location to the server location. A Progress bar is a visual component that changes and updates according to the total file upload percentage. Here we are going to make a local server and upload files to a destination folder by increasing the bar length as the upload progresses.

Formidable Module: It is a Node.js module for parsing form data, mainly used for file uploads.

Install: Go to the project directory and run the command:

npm install formidable

Install Formidable Module

Steps to Create Server:

Step 1: First create an ‘index.html’ file which will act as the frontend for the client. A sample code is given below. We create an empty component progressUpload which will be updated only after files are selected to upload.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <link rel="stylesheet" src="index.css"> 
    <title>Node.js Upload Files with Progress Bar</title> 
</head> 
  
<body> 
    <h1>Check The Progress of Uploaded Files</h1>    
     
    <div> 
        <span>Select files to upload</span> 
        <input type="button" class="chooseFiles" value="Select..." /> 
        <div class="progressUpload"></div> 
    </div> 
    <script src="uploader.js"></script> 
</body> 
  
</html>

Step 2: Create a ‘uploader.js’ which will open a pop-up to upload files and display a progress bar. The JS code is given below.

First, we create an input element for the files and attach that to our browse button on the frontend using the addEventListener function. When a new file is selected the file details are sent using FormData() format.

To update Progress Bar we addEventlistener to it and update its value in percentage. The progress bar is added to ‘index.html’ by creating two div components in createProgressbar( ) function.

Javascript

var browse = document.getElementsByClassName('chooseFiles')[0]; 
var selectDialog = document.createElement("INPUT"); 
selectDialog.setAttribute("type", "file"); 
selectDialog.setAttribute("multiple", "true"); 
selectDialog.style.display = "none"; 
var progressUpload = document.getElementsByClassName("progressUpload")[0]; 
var progress; 
addProgressBar(); 
browse.addEventListener("click", function(){     
    selectDialog.click(); 
      
}); 
  
selectDialog.addEventListener("change", function(){ 
      
    sendFiles(selectDialog.files); 
  
}); 
  
function sendFiles(files){ 
      
    resetProgressBar(); 
    var req = new XMLHttpRequest();        
    req.upload.addEventListener("progress", updateProgress); 
    req.open("POST", "/uploadFile"); 
    var form = new FormData(); 
    for(var file = 0; file < files.length; file++){          
          
        form.append("file" + file, files[file], files[file].name); 
          
    }  
    req.send(form);   
} 
function updateProgress(e){    
      
    progress.style.width = (((e.loaded/e.total)*100))+ "%"; 
  
} 
function resetProgressBar(){ 
    progress.style.width = "0%"; 
} 
function addProgressBar(){ 
    var progressBar = document.createElement("div"); 
    progressBar.className = "progressBar"; 
    progressUpload.appendChild(progressBar); 
    var innerDIV = document.createElement("div"); 
    innerDIV.className = "progress"; 
    progressBar.appendChild(innerDIV); 
    progress = document.getElementsByClassName("progress")[0]; 
}

Step 3: Now create the main server file ‘server.js’ which will upload the files to the destination and send the requested resources for a webpage to the client-side. We have four different URL request types for HTML, CSS, JS, and upload. Using the Nodejs file system module ‘fs’ move the file to a new location.

Note: In ‘var upd ‘ add your machine destination address.

Javascript

var http = require("http"); 
var url = require("url"); 
var fs = require("fs"); 
var formidable = require("formidable"); 
var host = "localhost"; 
var port = 7777; 
  
http.createServer(function (req, res) { 
    var path = url.parse(req.url, true); 
    if(path.pathname.endsWith("html")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", { "Content-Type": "text/html"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("css")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", {"Content-Type": "text/css"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("js")){ 
        fs.readFile("." + path.pathname, function(err, data){ 
            res.writeHead(200, "OK", { "Content-Type": "text/javascript"}); 
            res.write(data); 
            res.end(); 
        }); 
    } else if(path.pathname.endsWith("uploadFile")){ 
        var form = new formidable.IncomingForm(); 
          
        form.parse(req, function(err, fields, files){ 
              
            for(var file in files){ 
                if(!files.hasOwnProperty(file)) continue; 
                var old = files[file].filepath; 
                var upd = 'C:/Users/sunny/' + files[file].name; 
                fs.rename(old, upd, function (error) { 
                    if (error) throw error; 
                }); 
            } 
            res.write('File uploaded Successfully'); 
            res.end(); 
        }); 
    } 
}).listen(port, host);

Step 4: Finally create a stylesheet ‘index.css’ to format the display of the progress bar.

CSS

.progressupload{ 
    height: 20px; 
    margin-top: 25px; 
} 
.progress{ 
    background-color: green; 
    width: 0%; 
    height: 20px; 
     
} 
.progressBar{ 
    padding-top: 2px; 
    padding-bottom: 2px; 
}