title: How to get a sorted file path list using Node JS
body: <blockquote>
    <p><strong>Main goal</strong>: Converting images and then making a video (using videoshow) of the converted images in a specific order. </p>
    
    <p><strong>Problem</strong>: images are unordered.</p>
    
    <blockquote>
      <p><em>Expected</em>: have a file path list sorted just like I see in finder, by the filenames. </p>
      
      <p>Reality: I'm getting a non-sorted list of file paths. Since I am using <code>videoshow</code> to generate a video, this is a serious problem for me because images are being added unordered.</p>
      
      <blockquote>
        <p><strong>Tries:</strong></p>
        
        <p>I am using asynchronous code and I think this can be the problem, although I am currently using <code>fs.readdirSync()</code>... </p>
        
        <p>I have tried using <code>glob</code> module but it didn't worked either. 
        I have tried putting an <code>await</code> keyword before everything related to filename reading but it didn't worked either. </p>
      </blockquote>
    </blockquote>
  </blockquote>
  
  <hr>
  
  <h2>Code</h2>
  
  <pre><code>    const state = require("./state.js");
      const fs = require("fs");
  
      const originalDir = "./content/images/";
      const resizedDir = "./content/images/resized/";
  
      async function robot() {
        const content = state.load();
  
        await acquireImages();
        console.log(content.images)
  
        async function acquireImages() {
              originalFiles = fs.readdirSync(originalDir);
              imagesList = [];
              resizedImagesList = [];
              originalFiles.forEach(file =&gt; {
                  if (file.slice(-3) == "png") {
                      imagesList.push({
                          filePath: originalDir + file,
                          fileName: file.slice(0, -8)
                      });
                  }
              });
  
              await imagesList.forEach(image =&gt; convertImage(image));
  
              await populateImageList();
          }
  
        async function populateImageList() {
              resizedFilenames = await fs.readdirSync(resizedDir);
              resizedImagesList = [];
              for (const file of resizedFilenames) {
                  if (file.slice(-3) == "png") {
                      resizedImagesList.push(resizedDir + file);
                  }
              }
              content.images = resizedImagesList;
          }
      }
  
      module.exports = robot;
  </code></pre>
  
  <hr>
  
  <p><strong>Expected Output:</strong></p>
  
  <h3>Just like in Finder order.</h3>
  
  <p><img src="https://imgur.com/UwWKwLT.png" alt="expected output"></p>
  
  <h2>Current Output:</h2>
  
  <pre><code>[ '10_123.5-126.6(2)(converted).png',
    '11_123.5-126.6(3)(converted).png',
    '12_139.6-139.8(1)(converted).png',
    '13_139.6-139.8(2)(converted).png',
    '14_139.6-139.8(3)(converted).png',
    '15_166.1-170.6(1)(converted).png',
    '16_166.1-170.6(2)(converted).png',
    '17_166.1-170.6(3)(converted).png',
    '18_188.8-189.4(1)(converted).png',
    '19_188.8-189.4(2)(converted).png',
    '1_113.3-113.7(1)(converted).png',
    '20_188.8-189.4(3)(converted).png',
    '21_6.6-7(1)(converted).png',
    '22_6.6-7(2)(converted).png',
    '23_6.6-7(3)(converted).png',
    '24_68.5-68.6(1)(converted).png',
    '25_68.5-68.6(2)(converted).png',
    '26_68.5-68.6(3)(converted).png',
    '27_77.1-77.4(1)(converted).png',
    '28_77.1-77.4(2)(converted).png',
    '29_77.1-77.4(3)(converted).png',
    '2_113.3-113.7(3)(converted).png',
    '30_81.7-81.9(1)(converted).png',
    '31_81.7-81.9(2)(converted).png',
    '32_81.7-81.9(3)(converted).png',
    '33_87.3-87.4(1)(converted).png',
    '34_87.3-87.4(2)(converted).png',
    '35_87.3-87.4(3)(converted).png',
    '36_96.3-96.9(1)(converted).png',
    '37_96.3-96.9(2)(converted).png',
    '38_96.3-96.9(3)(converted).png',
    '39_undefined-undefined(1)(converted).png',
    '3_116.7-118.6(1)(converted).png',
    '40_undefined-undefined(2)(converted).png',
    '41_undefined-undefined(3)(converted).png',
    '4_116.7-118.6(2)(converted).png',
    '5_116.7-118.6(3)(converted).png',
    '6_121.6-122.3(1)(converted).png',
    '7_121.6-122.3(2)(converted).png',
    '8_121.6-122.3(3)(converted).png',
    '9_123.5-126.6(1)(converted).png' ]
  </code></pre>