import { Component } from '@angular/core' ; import { Tus , UploadState , UploadxControlEvent , UploadxOptions } from 'ngx-uploadx' ; import { environment } from '../../environments/environment' ; import { AuthService } from '../auth.service' ; @ Component ( { selector : 'app-tus' , templateUrl : './tus.component.html' } ) export class TusComponent { control ! : UploadxControlEvent ; state ! : UploadState ; uploads : UploadState [ ] = [ ] ; options : UploadxOptions = { allowedTypes : 'image/*,video/*' , endpoint : `${ environment . api }/files?uploadType=tus` , uploaderClass : Tus , authorize : async ( req ) => { const token = await this . authService . getTokenAsPromise ( ) ; req . headers [ 'Authorization' ] = `Token ${ token }` ; return req ; } , metadata ( file ) { return { original_name : file . name } ; } , retryConfig : { timeout : 60000 } , responseType : 'json' } ; constructor ( private authService ) { } cancel ( uploadId ? ) { this . control = { action : 'cancel' , uploadId } ; } pause ( uploadId ? ) { this . control = { action : 'pause' , uploadId } ; } upload ( uploadId ? ) { this . control = { action : 'upload' , uploadId } ; } onStateChanged ( state ) { this . state = state ; const target = this . uploads . find ( item => item . uploadId === state . uploadId ) ; target ? Object . assign ( target , state ) : this . uploads . push ( state ) ; } }