Soy un poco nuevo en JavaScript y la programación asincrónica, he estado luchando con este problema durante un par de días y no puedo entender qué estoy haciendo mal.

Tengo un elemento de entrada de archivo en mi HTML, pero puedo agregar más elementos de entrada al presionar un botón.

Quiero que el usuario cargue imágenes, las lea con FileReader() y las envíe al backend, aquí está mi código javascript.

 function uploadLayers() { var listaImagenes = [] for (let i = 1; i <= currentLayer; i++) { for (let j = 0; j < document.getElementById("archivos-" + i).files.length; j++) { let archivoActual = document.getElementById("archivos-" + i).files[j] var promesa = new Promise(function (resolve, reject) { let reader = new FileReader() reader.readAsDataURL(archivoActual) reader.onload = function () { listaImagenes.push(reader.result) resolve(listaImagenes) } }) } } promesa.then((resultado) => { console.log(resultado.length) }) }

El primer bucle for apunta al elemento de entrada, el segundo bucle for itera sobre los archivos de cada elemento de entrada.

Todo funciona "bien", pero cuando hago console.log() el resultado de la promesa (la longitud de la variable "listaImagenes") obtengo resultados diferentes, por ejemplo si intento subir 22 elementos el resultado será 20 o 21 , pero si ingreso solo "listaImagenes", no la longitud sino la lista real, puedo ver 22 elementos allí.

Estoy casi 100% seguro de que no entiendo la forma en que funciona async, se agradece cualquier ayuda.