typescript 52 lines · 8 steps

Tracking upload progress in Angular

An Angular service streams file-upload progress by folding HttpClient events into a running state object.

Explained by highlit

Angular Intermediate rxjs http-events state-reduction file-upload observables

1import { Injectable } from '@angular/core';
2import { HttpClient, HttpEventType, HttpRequest } from '@angular/common/http';
3import { Observable } from 'rxjs';
4import { map, distinctUntilChanged, scan } from 'rxjs/operators';
5 
6export interface UploadProgress {
progress: number;
state: 'pending' | 'uploading' | 'done';
response?: unknown;
10}
11 
12@Injectable({ providedIn: 'root' })
13export class FileUploadService {
constructor(private http: HttpClient) {}
15 
upload(file: File): Observable<UploadProgress> {
  const formData = new FormData();
  formData.append('file', file, file.name);
19 
  const request = new HttpRequest('POST', '/api/documents', formData, {
    reportProgress: true,
  });
23 
  return this.http.request(request).pipe(
    scan<any, UploadProgress>(
      (state, event) => {
        switch (event.type) {
          case HttpEventType.Sent:
            return { ...state, state: 'uploading' };
          case HttpEventType.UploadProgress:
            return {
              ...state,
              state: 'uploading',
              progress: event.total
                ? Math.round((100 * event.loaded) / event.total)
                : state.progress,
            };
          case HttpEventType.Response:
            return { state: 'done', progress: 100, response: event.body };
          default:
            return state;
        }
      },
      { state: 'pending', progress: 0 },
    ),
    distinctUntilChanged(
      (a, b) => a.progress === b.progress && a.state === b.state,
    ),
    map((state) => state),
  );
}
52}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1A reporting HttpRequest emits a stream of typed events rather than a single response, letting you observe progress mid-flight.
2scan folds a stream into an evolving state object, turning raw events into meaningful UI-ready snapshots.
3distinctUntilChanged suppresses redundant emissions so subscribers only react when something visible actually changes.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';