Return a boolean value from inside the FileReader onload function using angular 4

Question

I am using the FileReader to parse my csv data and get only the headers. I need to check the headers and do further execution based on the return value.

private checkIfValidFile(file){
    var isValidFile = false;

      var fileContent = new FileReader();
      fileContent.readAsText(file);
      fileContent.onload = () => {
        let text = fileContent.result;
        var data = text.split("\n");
        var headers = data[0].split(",");
        //fileHeaders = headers;
        console.log(headers);
        if (headers.indexOf('"File Name"') > -1) {
          isValidFile = true;
        }
      };
    return isValidFile
}
private uploadFiles(files: any) {
for (let index = 0; index < files.length; index++) {
        var isValidFile = this.checkIfValidFile(files[index]);
        if(isValidFile){
          //Execute some lines
        }
      }
}

But the return value gets returned before the onload. How can i do this?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Jul 18 '18 at 15:15

score 2 · Accepted Answer · answered Jul 18 '18 at 12:41

use "Promise" to achive that like this :

private checkIfValidFile(file):Promise<boolean>{

      var fileContent = new FileReader();
      fileContent.readAsText(file);
      
      return new Promise((resolve,reject)=>{
          fileContent.onload = () => {
          let text = fileContent.result;
          var data = text.split("\n");
          var headers = data[0].split(",");
          //fileHeaders = headers;
          console.log(headers);
          if (headers.indexOf('"File Name"') > -1) {
            resolve(true);
          }
          resolve(false);
        };
      });
      
}
private uploadFiles(files: any) {
for (let index = 0; index < files.length; index++) {
        this.checkIfValidFile(files[index]).then((isValidFile)=>{
           if(isValidFile){
             //Execute some lines
           }
        });
        
      }
}

score 1 · Answer 2 · answered Jul 18 '18 at 12:42

what about use promise?

like:

 private checkIfValidFile(file): Promise<boolean> {
    return new Promise((resolve, reject) => { // RETURN PROMISE FFORM YOUR FUNC

      try {
        var isValidFile = false;

        var fileContent = new FileReader();
        fileContent.readAsText(file);
        fileContent.onload = () => {
          let text = fileContent.result;
          var data = text.split("\n");
          var headers = data[0].split(",");
          //fileHeaders = headers;
          console.log(headers);
          if (headers.indexOf('"File Name"') > -1) {
            isValidFile = true;
            resolve(isValidFile);
          }
        };
      } catch (error) {
        reject(error);
      }


    });

  }
  private uploadFiles(files: any) {
    for (let index = 0; index < files.length; index++) {
      this.checkIfValidFile(files[index]).then((isValidFile) => {
        if (isValidFile) {
          //Execute some lines
        }
      });

    }
  }

Return a boolean value from inside the FileReader onload function using angular 4

2 Answers2