184. Report upload progress - Part 2 (#26)
This commit is contained in:
@ -4,11 +4,12 @@ import {User} from "../../model/user";
|
|||||||
import {UserService} from "../../service/user.service";
|
import {UserService} from "../../service/user.service";
|
||||||
import {NotificationService} from "../../service/notification.service";
|
import {NotificationService} from "../../service/notification.service";
|
||||||
import {NotificationType} from "../../notification/notification-type";
|
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 {NgForm} from "@angular/forms";
|
||||||
import {CustomHttpResponse} from "../../dto/custom-http-response";
|
import {CustomHttpResponse} from "../../dto/custom-http-response";
|
||||||
import {AuthenticationService} from "../../service/authentication.service";
|
import {AuthenticationService} from "../../service/authentication.service";
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
|
import {FileUploadStatus} from "../../model/file-upload.status";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user',
|
selector: 'app-user',
|
||||||
@ -32,6 +33,8 @@ export class UserComponent implements OnInit, OnDestroy {
|
|||||||
public editUser: User = new User();
|
public editUser: User = new User();
|
||||||
private currentUsername: string;
|
private currentUsername: string;
|
||||||
|
|
||||||
|
public fileUploadStatus: FileUploadStatus = new FileUploadStatus();
|
||||||
|
|
||||||
constructor(private userService: UserService,
|
constructor(private userService: UserService,
|
||||||
private notificationService: NotificationService,
|
private notificationService: NotificationService,
|
||||||
private authenticationService: AuthenticationService,
|
private authenticationService: AuthenticationService,
|
||||||
@ -249,7 +252,6 @@ export class UserComponent implements OnInit, OnDestroy {
|
|||||||
this.refreshing = false;
|
this.refreshing = false;
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
this.notificationService.notify(NotificationType.SUCCESS, `Profile image updated successfully: ${event}`);
|
|
||||||
this.refreshing = false;
|
this.refreshing = false;
|
||||||
this.getUsers(false);
|
this.getUsers(false);
|
||||||
}
|
}
|
||||||
@ -259,5 +261,21 @@ export class UserComponent implements OnInit, OnDestroy {
|
|||||||
|
|
||||||
private reportUploadProgress(event: HttpEvent<any>): void {
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user