184. Report upload progress - Part 2 (#26)

This commit is contained in:
Art
2021-09-22 15:09:37 +03:00
parent db00d8e0bf
commit 1cc28049b5

View File

@ -4,11 +4,12 @@ import {User} from "../../model/user";
import {UserService} from "../../service/user.service";
import {NotificationService} from "../../service/notification.service";
import {NotificationType} from "../../notification/notification-type";
import {HttpErrorResponse, HttpEvent} from "@angular/common/http";
import {HttpErrorResponse, HttpEvent, HttpEventType} from "@angular/common/http";
import {NgForm} from "@angular/forms";
import {CustomHttpResponse} from "../../dto/custom-http-response";
import {AuthenticationService} from "../../service/authentication.service";
import {Router} from "@angular/router";
import {FileUploadStatus} from "../../model/file-upload.status";
@Component({
selector: 'app-user',
@ -32,6 +33,8 @@ export class UserComponent implements OnInit, OnDestroy {
public editUser: User = new User();
private currentUsername: string;
public fileUploadStatus: FileUploadStatus = new FileUploadStatus();
constructor(private userService: UserService,
private notificationService: NotificationService,
private authenticationService: AuthenticationService,
@ -249,7 +252,6 @@ export class UserComponent implements OnInit, OnDestroy {
this.refreshing = false;
},
() => {
this.notificationService.notify(NotificationType.SUCCESS, `Profile image updated successfully: ${event}`);
this.refreshing = false;
this.getUsers(false);
}
@ -259,5 +261,21 @@ export class UserComponent implements OnInit, OnDestroy {
private reportUploadProgress(event: HttpEvent<any>): void {
switch (event.type) {
case HttpEventType.UploadProgress:
this.fileUploadStatus.percentage = Math.round(100 * event.loaded / event.total!);
this.fileUploadStatus.status = 'progress';
break;
case HttpEventType.Response:
if (event.status === 200) {
//for browser to fetch image when updating (because name left the same)
this.loggedInUser.profileImageUrl = `${event.body.profileImageUrl}?time=${new Date().getTime()}`;
this.notificationService.notify(NotificationType.SUCCESS, `${event.body.firstName}'s image updated successfully`);
this.fileUploadStatus.status = 'done';
} else {
this.sendErrorNotification('Unable to upload image. Please try again');
}
break;
}
}
}