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();
}

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();

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

Boosting Website Loading Time with Puppeteer: A Guide

Currently, I am using Puppeteer for automating tasks and it is working well. However, I have noticed that when loading the website, it takes longer than my usual websites. I attempted to use caching with the following code: const puppeteer = require(' ...

Why does the loginStatus in Redux become undefined when the component is initially rendered?

Currently diving into Redux and encountering a problem that is new to me as I usually work with React without redux. The issue arises when I attempt to showcase a portion of my state within a component named loginStatus. Despite setting up the state in the ...

Utilizing the 'input' method to modify the key of an array object within specified elements in a Vue.js application

i am looking to implement an input field that can be used to edit the title of the currently selected element component (the selection is made by clicking). The challenge here is to have a single input that works for each individually selected element. I h ...

Access the OpenWeatherMap API to retrieve the weather forecast for a single time slot within a 5-day period

Utilizing the openweathermap api, I am retrieving a 5-day/3-hour forecast here. The API call provides multiple results for each day with data available every 3 hours. For the full JSON response, you can access it here. Please note that the API key is only ...

What are the problems with Internet Explorer in Selenium WebDriver?

Currently dealing with a mouse-over issue in IE while using webdriver code. The functionality works smoothly in Chrome and Firefox, however, the problem arises only in IE. How can I resolve this? Initially focusing on an element and then clicking on a li ...

A step-by-step guide on effectively adopting the strategy design pattern

Seeking guidance on the implementation of the strategy design pattern to ensure correctness. Consider a scenario where the class FormBuilder employs strategies from the following list in order to construct the form: SimpleFormStrategy ExtendedFormStrate ...

What is the functionality of a nested child directive root element when placed at the same level as the parent directive root element?

Hello there, I'm currently facing a unique situation that has me stumped. Is it possible to replace the content of a directive's root element with that of a nested (child) directive? Here is an example scenario: <div id=”main”> <n ...

Using Iframe for WooCommerce integration and implementing Facebook login within an Ionic application

I have created an Ionic application that includes an iframe from a Wordpress website. Here is the code snippet from my home.page.ts file: import { Component } from '@angular/core'; import { DomSanitizer } from "@angular/platform-browser"; @Com ...

Refresh text box according to various radio buttons

I am new to jQuery and currently working on a script to dynamically update a textarea based on selected radio buttons. Here are the radio button options: <input type='radio' name='color'>Red <input type='radio' name ...

Enhancing the Performance of jQuery Scripts

My jQuery function called textfill is utilized on numerous div elements. Essentially, it resizes the text inside each div to perfectly fit the container so that longer texts are made smaller than shorter ones while maintaining the maximum font size without ...

If the given response `resp` can be parsed as JSON, then the function `$

I was using this script to check if the server's response data is in JSON format: try { json = $.parseJSON(resp); } catch (error) { json = null; } if (json) { // } else { // } However, I noticed that it returns true when 'res ...

JavaScript - memory heap exhausted

Recently, I encountered an issue with my API written in Node.js. The purpose of this API is to read data from a MySQL database, write it into a CSV file, and allow users to download the file once the writing process is complete. Initially, everything was f ...

What is the process for retrieving an element from component interaction?

Is there a way to dynamically change the background color based on component interaction? I am looking for a method to compare the target element with the current element. For example, here is a hypothetical scenario: <span [style.background]=" ...

"Enscroll – revolutionizing the way we scroll in

I recently incorporated the "enscroll" javascript scroll bar into my webpage. You can find more information about it at <div id="enscroll_name"> <ul> <li id="p1">product1</li> <li id="p2">product2</li> ...

How come my Bootstrap tooltip title only updates once when I use the keydown event in jQuery?

My goal is to provide users with a character count for text inputs and textareas based on a maximum limit. To achieve this, I have added tooltips to elements with a data-maxlength attribute. I update the tooltip for text inputs to display the current lengt ...

What is the significance of using $timeout in order to activate a watch function?

There is an interesting phenomenon happening with my directive. It watches the height of an element that is being updated by a controller using a factory method to retrieve data. Strangely, unless I include a $timeout in that factory function, my watch doe ...

What steps do I need to take to create a customizable Angular Material NPM module?

Can a custom npm module be created using Angular Material that allows the components to be styled by the consuming app's unique theme? For instance, imagine an npm module with a component containing the following template: <button mat-raised-butt ...

A guide on transferring data from JavaScript to HTML and efficiently directing it to a Laravel 5 controller

Recently, I have been exploring different ways to connect Javascript with HTML and interact with PHP. Although I am comfortable using plain PHP to send or retrieve data from a PHP backend, I decided to dive into Laravel5 as my PHP framework. So far, it has ...

Incorporate Typescript into specific sections of the application

I've got a Node.js application that's entirely written in JavaScript. However, there are certain sections of my app where I'd like to utilize TypeScript interfaces or enums. Is there a way for me to incorporate Typescript into only those s ...

What are the steps for integrating mongoDB with an angular2 application?

I currently have my angular2 & mongoDB setup successfully. While I've managed to read JSON files using the HTTP service, my goal is to create a fully functional application with database connectivity as well. I'm seeking advice on how to con ...