Issues uploading multiple files by chunking, javascript

I am having issues uploading multiple files through chunking using javascript. With one file, it seems to work fine, but if there is more than 1 file, program execution stops and does not continue with the next file upload.

I know it's most likely an issue with async/await. Please let me know what I am doing wrong. What I would like to happen is the following: user drops multiple files-> file1 is chunked and read -> once complete -> file2 is chunked and read -> etc.

Here is a screenshot of the current output:

You can see that the first file is uploaded, but then instead of continuing with second file, program execution stops.

Here is the code: function to loop through all files:

/* loop through all files and upload to server */
async loopThroughFiles(){
        for (const file of this.#files) {
            this.#file = file;
            this.#file_size = file.size;
            this.#total_file_size = this.#total_file_size + file.size;
            this.#file_count++;
            this.#file_type = file.type;
            this.#filename = file.name;
            console.log("filename: " + this.#filename);

            try {
                const result = await this.uploadFile(0, file); // uses fetch to send file server side
                console.log("finished uploading " + file.name);
                overallUploadStatusDiv.insertAdjacentHTML('afterend', file.name + result + "<br/>");
            }catch(err){
                console.log(err);
            }
        }
}

Function to uploadFile():

uploadFile(start,file) {
    return new Promise((resolve, reject) => {
    this.#next_slice = start + this.#slice_size + 1;
    let filePart = file.slice(start, this.#next_slice, this.#file_type);
    let fileReader = new FileReader();

    let self = this; // save object reference to use inside nested function
    fileReader.readAsDataURL(filePart);

    fileReader.onLoad = function (e) {
        return console.log("here is your data: " + e.target.result);
    };

    /** pass files in chunks to server **/
    //return new Promise((resolve, reject) => {
    fetch('../processFileUploadTEST.php', {
        method: 'POST',
        body: filePart
    }).then(response => {
        if (!response.ok) {
            throw new Error(response.statusText);
        }
    }).then(data => {
        //console.log("php data: " + data);
        var size_done = start + self.#slice_size;
        var percent_done = Math.floor(((size_done) / self.#file_size) * 100) + 1;
        let total_percent_done = Math.floor(((size_done) / self.#total_file_size) * 100) + 1;
        //console.log(self.#filename + " VS " + file.name);

        if (self.#next_slice < self.#file_size) {
            uploadStatusDiv.innerHTML = `Uploading: ${percent_done}`;
            self.uploadFile(self.#next_slice, file);
        } else {
            resolve(console.log("file " + self.#filename + " has been uploaded!"))
            //itemSpan[0].style.color = "blue";
        }
        overallUploadStatusDiv.innerHTML = `Total upload progress:   ${total_percent_done} %`;
    }).catch(error => console.log(error));

    }) // end Promise
} // end uploadFile function

} // end class

Any help/pointers in the right direction would be appreciated!

EDIT: I modified the code to make make proper use of async/await. The code is now working more like it should, except that it is not iterating the next files. It gets stuck after the first file. It seems that the promise never gets returned from the uploadFile() function, causing the for loop to stay on the current 1st iteration.

Can anybody see what I am doing wrong? I am attaching the new picture of the output. Thanks.

console output after code edit: