import { Component , ElementRef , OnDestroy , OnInit , ViewChild } from '@angular/core' ; import { UploadState , UploadxOptions , UploadxService } from 'ngx-uploadx' ; import { Observable , Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { environment } from '../../environments/environment' ; import { UploaderExt } from './uploader-ext.class' ; @ Component ( { selector : 'app-service-way' , templateUrl : './service-code-way.component.html' } ) export class ServiceCodeWayComponent implements OnDestroy , OnInit { state$ ! : Observable < UploadState > ; uploads : UploadState [ ] = [ ] ; options : UploadxOptions = { endpoint : `${ environment . api }/files?uploadType=multipart` , token : btoa ( 'user:pass' ) , uploaderClass : UploaderExt } ; numberOfCopies = 0 ; @ ViewChild ( 'file' , { read : ElementRef } ) fileInput ! : ElementRef ; private unsubscribe$ = new Subject < void > ( ) ; constructor ( private uploadService ) { this . uploads = this . uploadService . state ( ) ; } ngOnInit ( ) { this . state$ = this . uploadService . init ( this . options ) ; this . state$ . pipe ( takeUntil ( this . unsubscribe$ ) ) . subscribe ( state => { const target = this . uploads . find ( item => item . uploadId === state . uploadId ) ; target ? Object . assign ( target , state ) : this . uploads . push ( state ) ; } ) ; } ngOnDestroy ( ) { this . unsubscribe$ . next ( ) ; this . unsubscribe$ . complete ( ) ; } cancel ( uploadId ? ) { this . uploadService . control ( { action : 'cancel' , uploadId } ) ; } pause ( uploadId ? ) { this . uploadService . control ( { action : 'pause' , uploadId } ) ; } upload ( uploadId ? ) { this . uploadService . control ( { action : 'upload' , uploadId } ) ; } onChange ( ) { const files = this . getFiles ( ) ; for ( let i = 0 ; i < files . length ; i ++ ) { this . uploadService . handleFiles ( files [ i ] ) ; } } getFiles ( ) { return this . fileInput . nativeElement . files ; } }