0

I am reading a folder of images and want to get images name. But the problem here is I am getting empty array in response whereas I have checked by console I should get array of files name. Where am I going wrong?

app.get("/getImages",function(req,res){
    var folderName = './multiuploads/';
    var new_files   = [];     
    fs.readdir(folderName, (err, files) => {        
        for(var j=0;j<files.length;j++){
            console.log(files[j]) // this is giving me name of files
            new_files.push(files[j]);   // but this is not working                   
        }       
      }); 
      console.log(new_files); // this is coming blank
      res.send(new_files);

})

I am using this api to read image files from folder but the problem is that new_files array is still empty even though folder has some images.

halfer
  • 19,824
  • 17
  • 99
  • 186
Passionate Coder
  • 7,154
  • 2
  • 19
  • 44

3 Answers3

3

This is an async issue, try placing code after the for block but within the readdir callback:

app.get("/getImages",function(req,res){
var folderName = './multiuploads/';
var new_files   = [];     
fs.readdir(folderName, (err, files) => {        
    for(var j=0;j<files.length;j++){
        console.log(files[j]) 
        new_files.push(files[j]);                    
    }   
    console.log(new_files); 
    res.send(new_files);
  }); 
})

readdir callback is async, and therefor your console.log and res.send are executing before it finishes its operation.

silencedogood
  • 3,209
  • 1
  • 11
  • 36
1

fs.readdir is an asynchronous function which means the callback part will be executed sometime in the future (after directory reading is done).

Callback part:

(err, files) => {        
        for(var j=0;j<files.length;j++){
            console.log(files[j]) // this is giving me name of files
            new_files.push(files[j]);   // but this is not working                   
        }       
      });

so the code after this part is executed first which is:

console.log(new_files); // this is coming blank
res.send(new_files);

At this time new_files is empty because callback body is not executed yet. When the callback part is executed your program finishes there. So you wrote:

1
2
3

but it is running in this order (bbecause 2 is an async operation and JS doesn't block code execution, just jumps and run the next available code):

1
3
2

PS (solution):

app.get("/getImages",function(req,res){
    var folderName = './multiuploads/';
    var new_files   = [];     
    fs.readdir(folderName, (err, files) => {        
        for(var j=0;j<files.length;j++){
            console.log(files[j]) // this is giving me name of files
            new_files.push(files[j]);
            console.log('This line runs second');
            res.send(new_files);                 
        }       
      }); 
      console.log('This line runs first');
})
Xaqron
  • 29,931
  • 42
  • 140
  • 205
  • so what will be the solution for this writing send request inside readdir ( just after for loop) can do the work but i dnt think it's gud.. Can u suggest in this? – Passionate Coder Aug 01 '19 at 18:53
  • As other guys said you should move any code which you want to run after reading directory into callback body (right after the loop). – Xaqron Aug 01 '19 at 18:56
0

You can use readdirSync. Here is the link in case you need example Retrieving files from Directory Node Js

Garry
  • 536
  • 1
  • 5
  • 11