import { HttpClient , HttpEvent , HttpEventType , HttpResponse } from '@angular/common/http' ; import { Component } from '@angular/core' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { pipe } from 'rxjs' ; import { filter , map , tap } from 'rxjs/operators' ; import { requiredFileType } from './upload-file-validators' ; export function uploadProgress < T > ( cb ) { return tap ( ( event ) => { if ( event . type === HttpEventType . UploadProgress ) { cb ( Math . round ( ( 100 * event . loaded ) / event . total ) ) ; } } ) ; } export function toResponseBody < T > ( ) { return pipe ( filter ( ( event ) => event . type === HttpEventType . Response ) , map ( ( res ) => res . body ) ) ; } @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.scss' ] } ) export class AppComponent { progress = 0 ; signup = new FormGroup ( { email : new FormControl ( null , Validators . required ) , image : new FormControl ( null , [ Validators . required , requiredFileType ( 'png' ) ] ) } ) ; success = false ; constructor ( private http ) { } submit ( ) { this . success = false ; if ( ! this . signup . valid ) { markAllAsDirty ( this . signup ) ; return ; } this . http . post ( 'http://localhost:8080/signup' , toFormData ( this . signup . value ) , { reportProgress : true , observe : 'events' } ) . pipe ( uploadProgress ( progress => ( this . progress = progress ) ) , toResponseBody ( ) ) . subscribe ( res => { this . progress = 0 ; this . success = true ; this . signup . reset ( ) ; } ) ; } hasError ( field , error ) { const control = this . signup . get ( field ) ; return control . dirty && control . hasError ( error ) ; } } export function markAllAsDirty ( form ) { for ( const control of Object . keys ( form . controls ) ) { form . controls [ control ] . markAsDirty ( ) ; } } export function toFormData < T > ( formValue ) { const formData = new FormData ( ) ; for ( const key of Object . keys ( formValue ) ) { const value = formValue [ key ] ; formData . append ( key , value ) ; } return formData ; }