LWC issue with array variable being blank when accessed from another function

Question

I am building a custom file upload component as follows. I prepare my list of uploaded files inside the function handleFilesUpload. I then call another function called handleSaveFiles but inside of this function the variable that holds the list of files is empty. Can someone point me to why that is please?

docs.html

<template>
  <div class="slds-m-around_medkium">
    <lightning-input type="file" 
    onchange={handleFilesUpload}
    multiple>
    </lightning-input>
  </div>
 <template if:true={showUpload}>
  <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01">
      <div>
          <button onclick={closePopUp}>x</button>
          <div>
              <h1>Select File Type</h1>
          </div>
          <div>
              <div>
                  <lightning-combobox name="File Type" label="File Type" value="" placeholder="Choose File Type" options={filetype}
                      onchange={handleChange}></lightning-combobox>
              </div>
          </div> 
      </div>
  </section>
  <div role="presentation"></div>
</template>
</template>

docs.js

import { LightningElement, api, track, wire } from 'lwc';
import getFiles from '@salesforce/apex/docsUpload.getFiles';
import saveFiles from '@salesforce/apex/docsUpload.saveFiles';

export default class docs extends LightningElement {

    @api recordId
    filesUploaded = [];
    showUpload = false;
    filetype = { id: 1, label: "Item 1" },
        { id: 2, label: "Item 2" },
        { id: 3, label: "Item 3" }
    ]
       
    connectedCallback() {
        this.loadFiles();
    }

    loadFiles() {
        getFiles({appId: this.recordId})
        .then(result => {
            console.log(JSON.stringify(result));
        })
        .catch(error => {
            console.log(JSON.stringify(error));
        });
    }

    handleFilesUpload(event) {
        let files = event.target.files;
        let filescount = files.length;
        let readOpearationCount = 0;
        if(files.length > 0) {
            let filesName = '';
            for(let i = 0; i < files.length; i++) {
                let file = files[i];
                filesName = filesName + file.name + ',';
                let freader = new FileReader();
                freader.onload = () => {
                    var fileContents = freader.result.split(',')[1]
                    this.filesUploaded.push({'fileName':file.name, 'fileContent':fileContents});
                };
                freader.onloadend = () => {
                    readOpearationCount++;
                    if(readOpearationCount == filescount) {
                        this.showUpload = true;
                        this.handleSaveFiles();
                    }
                };
                freader.readAsDataURL(file);
            }
        }
    }

    handleSaveFiles() {
        console.log(JSON.stringify(this.filesUploaded));
    
        saveFiles({
            recordId: this.recordId,
            fileData: JSON.stringify(this.filesUploaded)
        })
        .then(result => {
            if(result){
                this.filesUploaded = [];
                console.log('file uploaded successfully.');
            }
            else {
                console.log('error during file upload');
            }
        }).catch(error => {
            console.log('error');
        });
    }
}

Answer 1

freader.onload runs only when the read operation triggered by readAsDataURL (or readAsText) ends and only if the file has been read successfully. Since you call this.handleSaveFiles() right after the for-loop, it will always run before the first onload handler. That's why filesUploaded is empty.

You should call this.handleSaveFiles() only after every file has been read. To keep track of occured read, you could leverage loadend event since it's fired when a file read has completed, successfully or not, while load event is fired just when a file has been read successfully.

handleFilesUpload(event) {
    const files = event.target.files;
    const filesCount = files.length;
    let readOperationCount = 0;
    for(const file of files) {
        const freader = new FileReader();
        freader.onload = () => {
            const fileContents = freader.result.split(',')[1]
            this.filesUploaded.push({'fileName': file.name, 'fileContent': fileContents});
        };
        freader.onloadend = () => {
            readOperationCount++;
            if (readOperationCount === filesCount) {
                // Call handleSaveFiles only when every file has been read
                this.handleSaveFiles();
            }
        };
        freader.readAsDataURL(file);
    }
}

Please note that readAsDataURL reads file's data as a base64 encoded string, if you're reading text files (like csv or json) you could use readAsText avoiding base64 encode/decode operations.