I have the following script which reads in all images from a directory and create a GIF.

async function createGif(algorithm) {
  return new Promise(async resolve1 => {
    const files = await promisify(readdir)(imagesFolder)

    // Bunch of other things
    // Happening here

    // draw an image for each file and add frame to encoder
    for (const file of files) {
      await new Promise(resolve3 => {
        const image = new Image()
        console.log(`reading ${file}`)
        image.onload = () => {
          ctx.drawImage(image, 0, 0)
          encoder.addFrame(ctx)
          resolve3()
        }
        image.src = path.join(imagesFolder, file)
      })
    }
  })
}

The images are of the pattern: image1,image2,image3,...image30.

However, the files are being read in this order when I check the console:

reading screenshot1.png
reading screenshot10.png
reading screenshot11.png
reading screenshot12.png
reading screenshot13.png
reading screenshot14.png
reading screenshot15.png
reading screenshot16.png
reading screenshot17.png
reading screenshot18.png
reading screenshot19.png
reading screenshot2.png
reading screenshot20.png

Why is it skipping from screenshot1 to screenshot10? It should be reading the files in the correct order in which they are in the directory. Like this:

reading screenshot1.png
reading screenshot2.png
reading screenshot3.png
...
reading screenshot10.png

How can I fix this?