How to use interface HttpProgressEvent in Angular?

Question

The api is here as same as in angular docs. However there isn't a example for it. I wanna know how to use it. It's better to have an example.

interface HttpProgressEvent { 
  type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress
  loaded: number
  total?: number
}

There is a similar question here https://stackoverflow.com/questions/36622826/angular-1-5-4-http-progress-event . Please see if this helps. — aks, Apr 12 '18 at 07:57
That's a reference to AngularJS, I think he's referring to the new Angular, as per the tag `Angular` — Bjorn 'Bjeaurn' S, Apr 12 '18 at 07:58

score 4 · Answer 1 · answered Apr 12 '18 at 08:05

There is an example in the official docs. Check this out:

const req = new HttpRequest('POST', '/upload/file', file, {
  reportProgress: true
});

// The `HttpClient.request` API produces a raw event stream
// which includes start (sent), progress, and response events.
return this.http.request(req).pipe(
  map(event => this.getEventMessage(event, file)),
  tap(message => this.showProgress(message)),
  last(), // return last (completed) message to caller
  catchError(this.handleError(file))
);


/** Return distinct message for sent, upload progress, & response events */
private getEventMessage(event: HttpEvent<any>, file: File) {
  switch (event.type) {
    case HttpEventType.Sent:
      return `Uploading file "${file.name}" of size ${file.size}.`;

    case HttpEventType.UploadProgress:
      // Compute and show the % done:
      const percentDone = Math.round(100 * event.loaded / event.total);
      return `File "${file.name}" is ${percentDone}% uploaded.`;

    case HttpEventType.Response:
      return `File "${file.name}" was completely uploaded!`;

    default:
      return `File "${file.name}" surprising upload event: ${event.type}.`;
  }
}

Docs

score 1 · Answer 2 · edited Jun 07 '21 at 17:13

import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Component, OnInit, ElementRef } from '@angular/core';
import * as XLSX from 'xlsx';
import { UploadService } from '../upload.service';

interface HttpProgressEvent {
    type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress
    loaded: number
    total: number
}

@Component({
    selector: 'app-uploadexcel',
    templateUrl: './uploadexcel.component.html',
    styleUrls: ['./uploadexcel.component.css']
})
export class UploadexcelComponent implements OnInit {
    file: File | null = null;
    progress: { percentage: number } = { percentage: 0 };
    selectedFiles: any = [];
    currentFileUpload: any;
    uploadFieldDisable: boolean = true;


    constructor(private uploadService: UploadService) {
        this.uploadFieldDisable = false;
    }

    ngOnInit(): void {
    }

    selectFile(event: any) {
        if (event.target.files.length > 0) {
            this.selectedFiles = event.target.files;
        }
    }
    event: HttpProgressEvent = { type: 0, loaded: 0, total: 0 };

    upload() {
        this.currentFileUpload = this.selectedFiles.item(0)
        this.uploadService.uploadExcel(this.currentFileUpload).subscribe(event => {
            if (this.event.type == HttpEventType.UploadProgress) {
                this.progress.percentage = Math.round(100 * this.event.loaded / this.event.total);
            } else if (event instanceof HttpResponse) {
                alert('File Successfully Uploaded');
            }
            this.selectedFiles = undefined;
        });
    }
}

score 0 · Answer 3 · answered Apr 12 '18 at 07:58

Maybe my answer is a little out of touch, but I recall this not properly being implemented yet. Of course, there's a typing for it, but in order to actually upload files and get a progress measurement, we needed to implement that ourselves using XmlHttpRequest.

Let me get back to you with a more dedicated example.

How to use interface HttpProgressEvent in Angular?

3 Answers3