import { ChangeDetectionStrategy , ChangeDetectorRef , Component , Input , OnDestroy , OnInit , ViewChild , } from '@angular/core' ; import { FormBuilder , FormGroup } from '@angular/forms' ; import { DomSanitizer } from '@angular/platform-browser' ; import { Gender , Profile } from '@ngx-starter-kit/models' ; @ Component ( { selector : 'ngx-app-profile' , templateUrl : './app-profile.component.html' , styleUrls : [ './app-profile.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class AppProfileComponent implements OnInit , OnDestroy { readonly genderOptions = Gender ; @ Input ( ) oidcProfile : any ; @ Input ( ) appProfile : Profile ; imagePath = this . sanitizer . bypassSecurityTrustResourceUrl ( 'assets/img/avatars/noavatar.png' ) ; editing = false ; hasAvatar = true ; formGroup : FormGroup ; @ ViewChild ( 'myPond' , { static : true } ) myPond : any ; files = [ ] ; server = { timeout : 7000 , fetch : ( url , load , error , progress , abort , headers ) => { } , restore : ( uniqueFileId , load , error , progress , abort , headers ) => { } , load : ( source , load , error , progress , abort , headers ) => { fetch ( `data:${ this . appProfile . avatar . mimeType };base64,${ this . appProfile . avatar . data }` ) . then ( ( r ) => r . blob ( ) ) . then ( load ) . catch ( error ) ; return { abort } ; } , process : ( fieldName , file , metadata , load , error , progress , abort ) => { console . log ( 'test' ) ; const formData = new FormData ( ) ; formData . append ( fieldName , file , file . name ) ; const request = new XMLHttpRequest ( ) ; request . open ( 'POST' , '/ajax/image-upload/xxxxxx' ) ; request . upload . onprogress = ( e ) => { progress ( e . lengthComputable , e . loaded , e . total ) ; } ; request . onload = ( ) => { if ( request . status >= 200 && request . status < 300 ) { load ( request . responseText ) ; } else { error ( 'Error' ) ; } } ; request . send ( formData ) ; return { abort : ( ) => { request . abort ( ) ; abort ( ) ; } , } ; } , revert : ( uniqueFileId , load , error ) => { const formData = new FormData ( ) ; formData . append ( 'unique' , uniqueFileId ) ; formData . append ( '_method' , 'DELETE' ) ; const request = new XMLHttpRequest ( ) ; request . open ( 'POST' , '/ajax/image-delete' ) ; request . onload = ( ) => { if ( request . status >= 200 && request . status < 300 ) { load ( request . responseText ) ; } else { error ( 'Error' ) ; } } ; request . send ( formData ) ; return { abort : ( ) => { request . abort ( ) ; } , } ; } , } ; pondOptions = { name : 'app-profile-avatar' , maxFileSize : '1MB' , dropOnPage : true , instantUpload : false , dropValidation : true , acceptedFileTypes : 'image/*' , server : { timeout : 7000 , load : this . loadHandler . bind ( this ) , process : this . processHandler . bind ( this ) , } , imagePreviewHeight : 170 , imageCropAspectRatio : '1:1' , imageResizeTargetWidth : 200 , imageResizeTargetHeight : 200 , stylePanelLayout : 'compact circle' , styleLoadIndicatorPosition : 'center bottom' , styleProgressIndicatorPosition : 'right bottom' , styleButtonRemoveItemPosition : 'left bottom' , styleButtonProcessItemPosition : 'right bottom' , } ; constructor ( private fb , private cd , private sanitizer ) { } ngOnInit ( ) { if ( this . appProfile ) { this . formGroup = this . fb . group ( { file : [ ] , gender : [ this . appProfile . gender ] , mobilePhone : [ this . appProfile . mobilePhone ] , } ) ; } else { this . formGroup = this . fb . group ( { file : [ ] , gender : [ ] , mobilePhone : [ ] , } ) ; } if ( this . appProfile && this . appProfile . avatar ) { this . files = [ { source : this . appProfile . avatar . title , options : { type : 'local' , } , } , ] ; this . imagePath = this . sanitizer . bypassSecurityTrustResourceUrl ( `data:${ this . appProfile . avatar . mimeType };base64,${ this . appProfile . avatar . data }` ) ; } else { this . hasAvatar = false ; } } loadHandler ( source , load , error , progress , abort , headers ) { if ( this . appProfile && this . appProfile . avatar ) { fetch ( `data:${ this . appProfile . avatar . mimeType };base64,${ this . appProfile . avatar . data }` ) . then ( ( r ) => r . blob ( ) ) . then ( load ) . catch ( error ) ; return { abort } ; } else { return { abort , } ; } } processHandler ( fieldName , file , metadata , load , error , progress , abort ) { console . log ( 'test' ) ; const formData = new FormData ( ) ; formData . append ( fieldName , file , file . name ) ; const request = new XMLHttpRequest ( ) ; request . open ( 'POST' , '/ajax/image-upload/xxxxxx' ) ; request . upload . onprogress = ( e ) => { progress ( e . lengthComputable , e . loaded , e . total ) ; } ; request . onload = ( ) => { if ( request . status >= 200 && request . status < 300 ) { load ( request . responseText ) ; } else { error ( 'Error' ) ; } } ; request . send ( formData ) ; return { abort : ( ) => { request . abort ( ) ; abort ( ) ; } , } ; } save ( ) { this . editing = false ; console . log ( this . formGroup ) ; } pondHandleInit ( ) { console . log ( 'FilePond has initialised' , this . myPond ) ; } pondHandleAddFile ( event ) { console . log ( 'A file was added' , event . file ) ; } pondHandleRemoveFile ( event ) { console . log ( 'A file was removed' , event . file ) ; console . log ( 'A file was removed1111' , this . files ) ; } createProfile ( ) { console . log ( this . myPond . server ) ; this . myPond . processFile ( ) . then ( ( file ) => { } ) ; } updateProfile ( ) { this . myPond . processFile ( ) . then ( ( file ) => { } ) ; } deleteProfile ( ) { } ngOnDestroy ( ) { } emitUpload ( event ) { console . log ( 'emitUpload' , event ) ; } removeAll ( ) { this . myPond . removeFiles ( ) ; } }