execute the function once the filereader has completed reading the files

submitTCtoDB(updateTagForm:any){
    for(let i=0;i<this.selectedFileList.length;i++){

  let file=this.selectedFileList[i];
  this.readFile(file, function(selectedFileList) {
      this.submitTC(updateTagForm,selectedFileList);
});

     }

    }

  }

readFile(file, callback){
    let fileReader: FileReader = new FileReader();
  fileReader.onload= () => {
    this.fileContent=fileReader.result;
    if(this.fileContent.indexOf("END DATA | BEGIN RESULTS") != -1){

    alert("Multiple testcases found in "+file.name+" file.  Please separate/save testcases in Calc Builder. Then reimport");

    const index: number = this.selectedFileList.indexOf(file);

    if (index > -1) {
     this.selectedFileList.splice(index, 1);
     console.log(file.name+"removed from the list");
 }  



}
    fileReader.readAsText(file);

  }
  callback(this.selectedFileList);
  }

submitTC(updateTagForm:any,selectedFileList){
    //process the selectedFileList came after the readFile has finished erading the files
  }

i am seeking guidance on how to properly execute the submitTC function only after the fileReader completes reading the files. I am unsure about the implementation of the readFile() callback. Any assistance in writing the correct logic for this scenario would be greatly appreciated. Flow: When user triggers submitTCtoDB, the function is called which then initiates the process where readFile reads the files, removes any unwanted elements, and returns the refined selectedFileList. Finally, submitTC takes this list and continues with its processing.

Please lend your expertise in solving this issue.

Answer №1

Consider utilizing es6 arrow function => over traditional function declarations in order to access the current class method instance.

submitTCtoDB(updateTagForm:any){
  for(let i=0;i<this.selectedFileList.length;i++){

    let file=this.selectedFileList[i];
    this.readFile(file, (selectedFileList) => {
        this.submitTC(updateTagForm,selectedFileList);
     });

   }

 }

To determine if the file reading process is complete, you can check the FileReader.result property. It remains null until the reading operation is done.

As per the documentation on Mozilla:

A suitable string or ArrayBuffer based on the read method used. The value is null if the reading is incomplete or unsuccessful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

identifying the element targeted on dynamically created links with the help of jquery

I have created dynamic links where clicking on a country link displays the cities of that particular country. I am trying to retrieve the event.target.id of the dynamically generated city link when it is clicked. $(".countryName").children().on('cl ...

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

Interactive Vue tree view featuring draggable nodes

I am currently working on creating a tree component in Vue.js, and I am facing challenges with implementing drag and drop functionality in the Tree component. I am unsure where to begin, as I have looked through similar code on GitHub but I am struggling t ...

Struggling to Create a Survey with Included Message: Error - Unable to Initialize MessageEmbed

I'm attempting to create a poll feature for my discord bot that displays both the poll question and results as an embedded message. While I've managed to get the poll information in plain text format, I'm encountering an error when trying to ...

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

Sorting custom strings in Javascript with special characters like dash (-) and underscore (_)

I am attempting to create a custom sorting method with the following order: special character ( - first, _ last) digit alphabets For instance, when sorting the array below var words = ['MBC-PEP-1', 'MBC-PEP01', 'MBC-PEP91&apo ...

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. https://i.sstatic.net/fSRIT.png I attempted to adjust the code for proper alignment before publishing, but was ...

Is there a way to set up a global web socket in NextJs?

I recently completed a tutorial on setting up a socket chat app, which I found at the following link: tutorial link. While I have successfully managed to get the system up and running, I'm facing an issue with exporting the front-end socket from the i ...

What are the various undisclosed schema types in A-Frame?

I've been exploring different examples of property types in the official documentation and various Github repositories (though now I can't remember which ones). The latter introduced me to unique properties like "min" and "max" for numbers, as we ...

Creating a JSON object in JavaScript using an array

Can anyone assist me with the following code snippet for formatting the current month? var monthNames = ['jan', 'fev', 'mar', 'abr', 'mai', 'jun', 'jul', 'ago', 'set&apos ...

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

The XMLHttpRequest's readystate gets stuck at 1 stage

Feeling a bit out of practice here - used to work with AJAX directly, but then spent a few years on a jQuery site and now my native JS skills are rusty. I've simplified my code as much as possible, but it's still not functioning: var rawfile = ...

React text hover image functionality

Just diving into the world of React and attempting to create a cool image popup effect when you hover over text in my project. I could really use some guidance on how to make it function within React, as the logic seems a bit different from plain HTML. Any ...

Updating An Angular Application from version 11 to version 12 Challenge

Once I completed installing all the required dependencies as per: https://update.angular.io/ I executed the command 'ng serve' in the terminal and encountered the following errors: ./node_modules/leaflet/dist/images/marker-icon.png:1:0 - Error: ...

What is the best way to retrieve information in Next.js when there are changes made to the data, whether it be new

Could you share a solution for fetching data in Next.js when data is added, deleted, or edited? I tried using useEffect with state to trigger the function but it only works when data is added. It doesn't work for edit or delete operations. I have mult ...

Is it possible for Typescript and Next.js to import a different project's *source code* only from the module's root directory?

Issue with Sharing React Components between Closed and Open Source Next.js Projects I am facing a challenge in my development setup involving two Next.js projects, one closed source (Project A) and the other open source (Project B). In Project A, which is ...

Combine two scope arrays in AngularJS

Is there a way to merge two arrays of scope in AngularJS within my controller so that I can display them in a single table? The merging would be based on a common field present in both arrays, similar to an SQL join operation where data from both tables ...

Tips for resolving the problem when encountering the "undefined data" issue in the success callback of an AJAX request

I am facing an issue with my JSP page where I have a button that calls an Ajax method named "sendmail()" upon click. The send mail API is in the Controller, and I am trying to display an alert message in the Ajax success function using data.message, but it ...

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

Converting user input from a string to an object in JavaScript: a comprehensive guide

Is there a way to transform user input string into objects when given an array of strings? ["code:213123", "code:213123", "code:213123"] I am looking to convert this array into an array of objects with the following format: [{code: "213123"},...] ...