The attribute 'loaded' is not found in the 'HttpSentEvent' data type

Currently, I have implemented an Angular HTTP post request with the following parameters:

this.http
  .post<{ body: any }>(environment.api.file.upload, reqBody, {
    reportProgress: true,
    observe: 'events',
  })
  .subscribe((ev: HttpEvent<{ body: any }>) => {
    switch (ev.type) {
      case 1:
        this.progress = ev.loaded / ev.total;
        break;
    }
  });

However, upon trying to access the value of `ev.loaded`, it results in the error message:

Property 'loaded' does not exist on type 'HttpSentEvent'

The condition ev.type === 1 is intended to only process HttpProgressEvent, but it doesn't work as expected.

Is there a way to utilize the `HttpEvent` type without encountering this error?

Answer №1

The issue was resolved by using HttpEventType.UploadProgress instead of 1.

this.http
  .post<{ body: any }>(environment.api.file.upload, reqBody, {
    reportProgress: true,
    observe: 'events',
  })
  .subscribe((ev: HttpEvent<{ body: any }>) => {
    switch (ev.type) {
      case HttpEventType.UploadProgress:
        this.progress = ev.loaded / ev.total;
        break;
    }
  });

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

What causes a typed string literal to be recognized as a pure string in TypeScript?

Consider the TypeScript code below: type example = 'BOOLEAN' | 'MULITSELECT' | ''; interface IObjectExample { a: string, readonly b: example } const handleObj = (obj: IObjectExample) :void => { console.log(&ap ...

How to generate a SAS token or URL for a blob in React?

Hey there! I'm working on a React app that's written in TypeScript. I need to retrieve the document name as a query parameter and then get the SAS URL of the document for additional processing. Do you have any suggestions on how I can accomplish ...

Angular has the ability to round numbers to the nearest integer using a pipe

How do we round a number to the nearest dollar or integer? For example, rounding 2729999.61 would result in 2730000. Is there a method in Angular template that can achieve this using the number pipe? Such as using | number or | number : '1.2-2' ...

Unable to fetch options for drop-down list from Database

As someone who is new to frontend application development, I am facing a challenge in populating a Select list from the database. Despite following similar approaches like the one discussed in How to populate select dropdown elements with data from API - R ...

Angular 2 component failing to show JSON data

I recently started diving into Spring MVC and Angular 2 while working on a web application as a side project. I've made good progress with the Spring MVC app, but now I want to transition to an Angular 2 front end. Following the quick start guide on A ...

The attribute 'randomUUID' is not found within the 'Crypto' interface

I attempted to utilize the crypto.randomUUID function in my Angular app version 13.1, however, it does not seem to be accessible. When trying to use it, I encountered this error: TS2339: Property 'randomUUID' does not exist on type 'Crypto ...

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

`The flaw in filtering logic - an analysis`

Looking to find matching records within two Lists. We have a List called allAnimals with attributes like animalId, and another List named domesticAnimals also containing animalId. The goal is to compare the two lists and create a new list where the anima ...

Optimizing Angular Performance with Trackby in Dual Lists

How can I write two ngFor lists with trackby to prevent elements from being recreated when moving between the lists? I know that trackby helps in avoiding recreation of elements within a single list, but is there a way to achieve this across multiple list ...

Angular with Ionic v4 - Creating custom directives for input elements

Seeking to develop a new function akin to the "clearInput" directive found on the ion-input component, with a different icon and enhanced features :) Previously had a directive functioning in ionic 3, but now it's no longer within the shadow dom elem ...

The Angular compiler experiences slowness when running on two laptops with the same model

My coworker and I are baffled by the discrepancy in compilation times. Despite having identical Dell Laptop 7030 models, SSDs, hard drives, memory specs, and task manager processes, our builds vary significantly. The computers were ordered from the corpor ...

Is it advisable to deactivate change detection during the initialization phase of an Angular app?

Just to provide some background: My Angular 5 application goes through a startup cycle that involves: HTTP calls to server APIs (checking token, retrieving user data) Local storage (database) calls A significant initialization process to prepare and tra ...

Specifying the data structure of a complex nested Map in TypeScript

Struggling to create a deeply nested (recursive) Map in Typescript generically. My attempt is to convert the provided Javascript example to Typescript: const map1 = new Map([ ['key1', 'value1'] ]) const map2 = new Map([ ['keyA& ...

Updating a component in Angular 4.3.1 from within an observable callback

My Project Journey I am currently immersing myself in learning Angular by working on a personal project: developing a game that involves routing, services, and more. One of the requirements is to hide the header on the landing page (route for '/&apos ...

Creating a Webpack bundle that includes third-party JavaScript files consists of utilizing the appropriate configuration settings

After researching Webpack and checking similar posts on stackoverflow, I'm still struggling to add additional files to my bundle. Currently, I've successfully included my js modules in the bundle.js file, but now I want to incorporate other files ...

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

While I know this question has been addressed on Stack Overflow here, I still find myself struggling with a similar issue in my TypeScript project. Currently, I am in the process of converting a JavaScript project to Typescript. Within one of my React com ...

Unable to redirect to another component using Angular route navigation

I recently started working with Angular and I'm currently building an Angular 4 app. I'm facing an issue where I'm trying to navigate from a module component to a layout component when a button is clicked, but the navigation is not working. ...

What is the proper way to specify a generic type as a parameter in TypeScript?

I have devised a basic Form class using TypeScript: class Form<FormData> { protected data: FormData; constructor(data: FormData) { this.data = data; } } To ensure the form receives specific data upon instantiation, I included a ...

What could be causing the issue with two-way binding in mat-table?

I'm currently working on implementing a table using Angular Material. My goal is to have an input field available in each row, allowing the user to enter data that will be saved along with the rest of the table. Below is a snippet of the code I am u ...

Leverage a custom server (such as NestJS) within NextJS to dynamically render targeted pages

I am experimenting with using NestJS as a custom server for NextJS, following the instructions in this article. Here is a simplified version of the code: @Controller('/') export class ViewController { @Get('*') async static(@Req() r ...