title: how to set the download status of a file to a datatable using node.js
body: <p>Currently,I'm able to get the download status of a file to the console.But now I'm trying to display the status in the UI.</p>
  
  <p>My index.js :</p>
  
  <pre><code>    #!/usr/bin/env node
  
  var http = require('http');
  var _ = require('lodash');
  var express = require('express');
  var fs = require('fs');
  var path = require('path');
  var util = require('util');
  var program = require('commander');
  
  //Downloading a file and displaying the status in the console
  var request = require('request');
  var progress = require('request-progress');
  var DOWNLOAD_DIR = '/usr/local/';
  var file_name = 'newgoogle.png' 
  
  progress(request('https://www.google.com/images/srpr/logo3w.png'), {
      throttle:0,   
      delay: 0       
  })
  .on('progress', function (state) {
      console.log('received size in bytes', state.received);
      console.log('total size in bytes', state.total);
      console.log('percent', state.percent);
  })
  .pipe(fs.createWriteStream(DOWNLOAD_DIR + file_name))
  .on('error', function (err) {
   console.log("error");  
  })
  .on('close', function (err){
  console.log("Download Complete"); 
  })
  
  
  function collect(val, memo) {
    if(val &amp;&amp; val.indexOf('.') != 0) val = "." + val;
    memo.push(val);
    return memo;
  }
  
  program
    .option('-p, --port &lt;port&gt;', 'Port to run the file-browser. Default value is 8088')
    .option('-e, --exclude &lt;exclude&gt;', 'File extensions to exclude. To exclude multiple extension pass -e multiple times. e.g. ( -e .js -e .cs -e .swp) ', collect, [])
    .parse(process.argv);
  
  var app = express();
  var dir =  process.cwd();
  app.use(express.static(dir)); //app public directory
  app.use(express.static(__dirname)); //module directory
  var server = http.createServer(app);
  
  if(!program.port) program.port = 8089;
  
  server.listen(program.port);
  console.log("Please open the link in your browser http://&lt;YOUR-IP&gt;:" + program.port);
  
  app.get('/files', function(req, res) {
   var currentDir =  dir;
   var query = req.query.path || '';
   if (query) currentDir = path.join(dir, query);
   console.log("browsing ", currentDir);
   fs.readdir(currentDir, function (err, files) {
       if (err) {
          throw err;
        }
        var data = [];
        files
        .filter(function (file) {
            return true;
        }).forEach(function (file) {
          try {
                  //console.log("processing ", file);
                  var stats = fs.statSync(path.join(currentDir,file));
                  var time = stats["atime"];
                  var date = time.toString().substr(4,11);
  
                  var isDirectory = fs.statSync(path.join(currentDir,file)).isDirectory();
                  if (isDirectory) {
                    data.push({ Name : file,Date : date, IsDirectory: true, Path : path.join(query, file)  });
                  } else {
                    var ext = path.extname(file);
                    if(program.exclude &amp;&amp; _.contains(program.exclude, ext)) {
                      console.log("excluding file ", file);
                      return;
                    }       
                    data.push({ Name : file,Date:date, Ext : ext, IsDirectory: false, Path : path.join(query, file) });
                  }
  
          } catch(e) {
            console.log(e); 
          }        
  
        });
        data = _.sortBy(data, function(f) { return f.Name});
        res.json(data);
    });
  });
  
  
  app.get('/', function(req, res) {
   res.redirect('lib/template.html'); 
  });
  
  app.get('/directory', function(req, res) {
    var currentDir =  dir;
    var query = req.query.path || '';
  if (query) currentDir = path.join(dir, query);
        var data = { directory: currentDir }
    res.json(data);
  
  });
  </code></pre>
  
  <p>My app.js :</p>
  
  <pre><code>(function($){
  
          var extensionsMap = {
                        ".zip" : "fa-file-archive-o",         
                        ".gz" : "fa-file-archive-o",         
                        ".bz2" : "fa-file-archive-o",         
                        ".xz" : "fa-file-archive-o",         
                        ".rar" : "fa-file-archive-o",         
                        ".tar" : "fa-file-archive-o",         
                        ".tgz" : "fa-file-archive-o",         
                        ".tbz2" : "fa-file-archive-o",         
                        ".z" : "fa-file-archive-o",         
                        ".7z" : "fa-file-archive-o",         
                        ".mp3" : "fa-file-audio-o",         
                        ".cs" : "fa-file-code-o",         
                        ".c++" : "fa-file-code-o",         
                        ".cpp" : "fa-file-code-o",         
                        ".js" : "fa-file-code-o",         
                        ".xls" : "fa-file-excel-o",         
                        ".xlsx" : "fa-file-excel-o",         
                        ".png" : "fa-file-image-o",         
                        ".jpg" : "fa-file-image-o",         
                        ".jpeg" : "fa-file-image-o",         
                        ".gif" : "fa-file-image-o",         
                        ".mpeg" : "fa-file-movie-o",         
                        ".pdf" : "fa-file-pdf-o",         
                        ".ppt" : "fa-file-powerpoint-o",         
                        ".pptx" : "fa-file-powerpoint-o",         
                        ".txt" : "fa-file-text-o",         
                        ".log" : "fa-file-text-o",         
                        ".doc" : "fa-file-word-o",         
                        ".docx" : "fa-file-word-o",         
                      };
  
    function getFileIcon(ext) {
      return ( ext &amp;&amp; extensionsMap[ext.toLowerCase()]) || 'fa-file-o';
    }
  
  
  
    var currentPath = null;
     var options = {
          "bProcessing": true,
          "bServerSide": false,
          "bPaginate": false,
          "bAutoWidth": false,
           "sScrollY":"250px",
        "fnCreatedRow" :  function( nRow, aData, iDataIndex ) {
      if (!aData.IsDirectory) return;
      var path = aData.Path;
      $(nRow).bind("click", function(e){
          $.get('/files?path='+ path).then(function(data){
              table.fnClearTable();
              table.fnAddData(data);
              currentPath = path;
          });
  
  
          $.get('/directory?path='+ path).then(function(data){        
              $("input[name='location']").val(data.directory);
             //$("#showDiv").hide();
           });         
      e.preventDefault();
      });
  },
  
  
  
          "aoColumns": [{"sTitle":"File Name", "mData": null, "bSortable": false, "sClass": "head0", "sWidth": "55px",
              "render": function (data, type, row, meta) {
                if (data.IsDirectory) {
                  return "&lt;a href='#' target='_blank'&gt;&lt;i class='fa fa-folder'&gt;&lt;/i&gt;&amp;nbsp;"  + data.Name +"&lt;/a&gt;";
                } else {
                  return "&lt;a href='/" + data.Path + "' target='_balnk'&gt;&lt;i class='fa " + getFileIcon(data.Ext) + "'&gt;&lt;/i&gt;&amp;nbsp;" + data.Name +"&lt;/a&gt;";
                }
              }
            },
              {"sTitle":"Date",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px",
              "render": function (data, type, row, meta) {
                if (data.IsDirectory) {
                   return  data.Date;
               }else{
                 return data.Date;
  
               } 
              }
            },
          {"sTitle":"Status",align: 'Center', "mData": null, "bSortable": false, "sClass": "head1", "sWidth": "55px",
              "render": function (data, type, row, meta) {
                if (data.IsDirectory) {
                   return  data.Date;
               }else{
                 return data.Date;
  
               }
              }
            }
          ]   
  
       };
  
    var table = $(".linksholder").dataTable(options);
  
    $.get('/files').then(function(data){
        table.fnClearTable();
        table.fnAddData(data);
    });
  
  $.get('/directory').then(function(data){        
      $("input[name='location']").val(data.directory);
     $("#showDiv").hide();
  });
  
  $(".up").bind("click", function(e){
      if (!currentPath) return;
      var idx = currentPath.lastIndexOf("/");
      var path =currentPath.substr(0, idx);
      $.get('/files?path='+ path).then(function(data){
          table.fnClearTable();
          table.fnAddData(data);
          currentPath = path;
      });
  
  $.get('/directory?path='+path).then(function(data){
      $("input[name='location']").val(data.directory);
  
   });
  
  });
  })(jQuery);
  </code></pre>
  
  <p>My template.html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;File Browser&lt;/title&gt;
      &lt;link rel="stylesheet" href="/lib/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="/lib/app.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
     &lt;div id="panelDiv"&gt;
  
             &lt;div class="panel-heading"&gt;
                     &lt;button type="button" id="butDiv" &gt;Browse&lt;/button&gt;
                      &lt;input type="text" name="location" size="35"/&gt;
                     &lt;span class="up"&gt;
                      &lt;i class="fa fa-level-up"&gt;&lt;/i&gt; Up
                     &lt;/span&gt; 
             &lt;/div&gt;
        &lt;div id="showDiv" class="panel-body"&gt;
                &lt;table class="linksholder"&gt;
                &lt;/table&gt;
        &lt;/div&gt;
  
    &lt;/div&gt; 
      &lt;script src="/lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/datatable/js/jquery.datatables.min.js"&gt;&lt;/script&gt;
      &lt;script src="/lib/app.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
  
          $("#showDiv").hide();
  
  });  
  
  $("#butDiv").click(function(){
          $("#showDiv").show();
  
   });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Current Format:
  <a href="https://i.stack.imgur.com/9Kc5Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Kc5Y.png" alt="enter image description here"></a></p>
  
  <p>In the Current Format,in the status column I'm trying to show whether the download is complete (or) how much percent it has downloaded.Can anyone please help me out to move further ...</p>