How can one effectively monitor the advancement of a file transfer operation?

Looking at integrating a Spring Boot REST API with an Angular Frontend, I am interested in monitoring file upload/download progress.

I recently came across an informative article that dives into the implementation details of this feature. The approach seems to center around configuring the client side, where setting the reportProgress property in HttpOptions for POST requests allows for tracking the UploadProgress event containing data on bytes loaded and total.

However, I have some questions:

  1. Does this method solely apply to file uploads, or is there a similar technique for monitoring file downloads as well?
  2. What principle governs this methodology?

Elaborating on the second point:

To track upload/download progress accurately, the server needs to convey the amount of data transmitted/received to the client. Given my backend operates as a REST API, it appears necessary to send periodic inquiries like "How much data have you received" or "How much data have you sent." Is my interpretation correct regarding REST API behavior? If so, does the described method involve Spring Boot consistently querying my server for progress updates?

Are there alternative approaches available?

One idea is utilizing websockets: These facilitate real-time communication between client and server, enabling server-initiated notifications on data reception without the need for continuous client requests. Could this potentially offer a more efficient solution?

Answer №1

Opting for event reporting with the reportProgress method would be more beneficial. As I comprehend it, the API requests are sent only after the upload process is finished. This progress reporting feature is inherent to Angular HttpClient.

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

Improving the utilization of services in Angular

I have a DatesService that handles date manipulation. Additionally, I have two services that require date manipulation - EventsService and CalendarService. The CalendarService utilizes the EventsService. My query is: what would be more efficient (in terms ...

Automatic renewal of bearer token in Angular 7

My AuthService has two key methods: getAuthToken (returns a Promise to allow lazy invocation or multiple invocations with blocking wait on a single set) refreshToken (also returns a Promise, using the refresh token from the original JWT to request a ...

Error: Bitbucket pipeline does not have the necessary permissions to complete the operation

I encountered an error while building ng build on Bitbucket. My backend is Firebase. Can you help me figure out what I'm doing wrong? EPERM: operation not permitted, lchown '/opt/atlassian/pipelines/agent/build/node_modules/.cache/angular-buil ...

Utilizing Google Closure Library with Angular 6

I am looking to integrate the google closure library into my angular 6 application. To achieve this, I have utilized the following commands: npm install google-closure-compiler and npm install google-closure-library. My application can be successfully co ...

How to access the state of an @ngrx/data entity in a reducer function in ngrx 8

I am trying to access the state of a ngrx/data entity within a reducer function. Currently, I am working on implementing a pager (pagination) feature where users can navigate through different pages. However, I am facing a challenge in determining the tot ...

What is the best way to verify a function that produces multiple outcomes?

I have a scenario where an effect returns first action A and then action B @Effect() myCustomEffect$: Observable <Action> = this.actions$ .ofType('CUSTOM_ACTION') .switchMap(() => Observable.of( // notifying subscribers about a ...

Creating a custom directive in Angular 2 that restricts input to text only

I have recently created a directive that specifically allows only numbers by using key codes. However, I've noticed that when I try to copy and paste text into the text box, it accepts the input but does not display it. Is there a way to utilize &apo ...

Experiencing issues with Errors when Targeting ES5 in Angular2 TypeScript?

In my development environment, the npm version is 3.10.10, and I want to create a new Angular2 project from scratch. When I try running npm install angular2 --save I encounter this error message: Error Image After referring to this answer which recomm ...

npm encountered an error while trying to update Angular 4

Looking to update Angular2 to Angular 4 and encountering an issue with the following command: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular ...

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor

Greetings! I am currently working on a web application where I need to showcase student data that is being received in JSON format. Below is the TypeScript code snippet that outlines the structure of the student data: export interface studentData{ ...

Combining class and data within an iteration while utilizing ngFor

I have a dynamic table with rows generated using ngFor <tbody> <tr *ngFor="let item of Details"> <div class="row details-row row-cols-lg-2 row-cols-1" *ngIf="closureDetails"> <div ...

Getting an Angular TypeError after upgrading to version 9? It seems that the property 'selectors' cannot be read from null

After upgrading my Angular app from v7 to v8 and then v8 to v9, I encountered an issue. My app works perfectly locally when I run ng serve, but when I build for production using ng build --prod and deploy the app, I get an error in the application's c ...

The unit test ends right before reaching the RxJS skipWhile method

of({loadstatus: Loaded}) .skipWhile(user => user.loadStatus !== Loaded) .take(1) .subscribe(user => do some stuff) I am puzzled by why a unit test is not triggering the skipWhile function in the code snippet above. When I set a breakpoin ...

Step-by-step guide for deploying an Angular 2 CLI app on GitHub

As a front-end engineer, I have limited experience with deployment. Currently, I am working on my pet project using angular-cli. What is the best way to deploy it on GitHub Pages? Are there any other straightforward methods for deployment? ...

Buttons for camera actions are superimposed on top of the preview of the capacitor camera

I am currently using the Capacitor CameraPreview Library to access the camera functions of the device. However, I have encountered a strange issue where the camera buttons overlap with the preview when exporting to an android device. This issue seems to on ...

Tips for resolving the issue: "Encountered error loading module script..." in Angular 8 and Electron 5

I have been working on developing an Electron 5 app using Angular 8. Despite following numerous online tutorials, I keep encountering the same error. Initially, I set up a new project and ran ng serve --open, which successfully displayed the default angul ...

What purpose does the # symbol serve in Angular when interpolating values?

Here is an example provided from the following link: https://angular.io/guide/lifecycle-hooks export class PeekABoo implements OnInit { constructor(private logger: LoggerService) { } // Implementing OnInit's `ngOnInit` method ngOnInit() { this ...

What is the best way to pass a full object from an Angular 2 dropdown list to the service?

Is it possible to return an object from a dropdown list to the service? I would like to be able to get the component object whenever I click on an item in onChangeForComponent. <select [ngModel]="selectedDev" (ngModelChange)="onChangeForComponent($eve ...

Capable of generating accounts using Postman, experiencing difficulties with creating accounts from React

Currently, I am working on a project that utilizes a React/Spring Boot/MYSQL stack and I have encountered an error message stating "POST 415: SyntaxError: Unexpected end of input at line 67". Line 67 is as follows: }).then(res => res.json()) This sect ...

Can a blob file be transformed into base64Data using Javascript specifically in Ionic and Angular frameworks?

https://i.stack.imgur.com/3aMyx.png[ async FileZip() { const code = await fetch("./assets/input.txt") var blob = await downloadZip([code]).blob() console.log(blob); function blobToBase64(blob: Blob): Observable<string> { r ...