Selecting Multiple Images and storing them in a data array (FIGMA)

Question

I am building a plugin for FIGMA, where the user selects multiple images, which I then save in an array, that I send to be interpreted.

I have 2 issues with my code

• img.src = bin; does not trigger img.onload, but if I set img.src = "literal string", the onload method workds.
• the imageData array sent at the end is undefined, I assume because of my bad understanding of async functions.

I would appreciate your help figuring this out. Thank you P.S. this is pure javascript, and you don't need to know FIGMA to follow the code.

<input type="file" id="images" accept="image/png" multiple />
<button id="button">Create image</button>

<script>
    const button = document.getElementById('button');

    button.onclick = () => {
        const files = document.getElementById('images').files;      
        
        function readFile(index) {
            console.log(1);
            if (index >= files.length) {return};
            console.log(2);

            const file = files[index];
            const imageCaption = file.name;

            var reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = function (e) {
                console.log(4);
                // get file content  
                const bin = e.target.result;
                const imageBytes = new Uint8Array(bin);

                //Get Image width and height
                var img = new Image();
                img.src = bin;
                img.onload = function () {
                    console.log(6);
                    const width = img.width;
                    const height = img.height;  
                    
                    console.log("imageCaption: " + imageCaption);
                    console.log("width: " + width);
                    console.log("height: " + height);
                    console.log("imageBytes: " + imageBytes);

                    var data = {imageBytes, imageCaption, width, height};

                    //Read Next File
                    nextData = readFile(index + 1);
                    if( nextData ) {
                        data.concat(nextData)
                    }
                    return data;
                }
            }
        }

        //Call function to Read and Send Images
        const imageData = readFile(0);

        //Send Data
        parent.postMessage({
            pluginMessage: {
                type: 'send-image',
                imageData,
            }
        }, '*');