Anticipating the completion of post requests

Question

Anticipating the completion of post requests

I am currently working on implementing a file upload feature in Angular. I have tackled the issue of file size restrictions by creating an API endpoint that can receive file chunks. Once all the chunks are received, another endpoint needs to be triggered to combine these chunks on the server. The challenge I am facing is determining when all the post requests are complete without relying on Promises. Since I am new to Angular and JavaScript, I am unsure how to approach this problem.

let i = 0;
for(let offset = 0; offset < file.size; offset += chunkSize) {
  let chunk = file.slice( offset, offset + chunkSize );
  let formData = new FormData();
  formData.append("fileUpload", chunk, file.name + ".part" + i);
  formData.append("identifier", identifier.toString());
  this.http.post(this.baseUrl + "Upload", formData).subscribe();
}

javascript angular typescript

Answer 1

Answer №1

To store these in an array and make use of forkJoin, then you can subscribe to the result.

This approach allows all the http requests to be made simultaneously, with the subscribe function executed once they are all finished.

let count = 0;
const requestArray = [];
for( let start = 0; start < data.length; start += batchLength ){
    let batch = data.slice( start, start + batchLength );

    let formData = new FormData();
      formData.append("dataBulk", batch, data.name + ".batch" + count);
      formData.append("refID", referenceId.toString());
    requestArray.push(
      this.http.post(this.apiUrl + "BatchUpload", formData)
    ).
}
forkJoin(requestArray).subscribe();

Answer 2

To store these in an array and make use of forkJoin, then you can subscribe to the result.

This approach allows all the http requests to be made simultaneously, with the subscribe function executed once they are all finished.

let count = 0;
const requestArray = [];
for( let start = 0; start < data.length; start += batchLength ){
    let batch = data.slice( start, start + batchLength );

    let formData = new FormData();
      formData.append("dataBulk", batch, data.name + ".batch" + count);
      formData.append("refID", referenceId.toString());
    requestArray.push(
      this.http.post(this.apiUrl + "BatchUpload", formData)
    ).
}
forkJoin(requestArray).subscribe();

Anticipating the completion of post requests

Answer №1

Similar questions

Set up local npm packages for easy access by different projects

Array of options with specified data types in Props interface

Provide the context for a template within a dynamically generated component

Is JavaScript Promise Chaining Allowed?

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Exploring Node.js and JSON: Retrieving specific object attributes

Issue with external JavaScript file being unresponsive on mobile browser

What is the best way to transfer data from an Ajax function to a controller action?

Avian-themed masking feature for jCarousel

Verify that the zip code provided in the input matches a record in the JSON data and extract the

How to Use JQuery to Retrieve the Nearest TD Element's Text Content

What steps do I need to take to create a fresh interface in useState with the help of Typescript

Every time I rotate my div, its position changes and it never goes back to

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

Delete items from several arrays on a click event in React

Web scraping with Cheerio in Node.js sometimes yields undefined results

Arranging JSON array in Angular 6 by specific key within the nested array

Choose up to three elements using jQuery

Efforts to toggle visibility of icons in React

ts:Accessing the state within a Redux store