import { Component , ElementRef , HostListener , Input , OnInit } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; @ Component ( { selector : 'app-file-upload' , templateUrl : './file-upload.component.html' , providers : [ { provide : NG_VALUE_ACCESSOR , useExisting : FileUploadComponent , multi : true } ] , styleUrls : [ './file-upload.component.scss' ] } ) export class FileUploadComponent implements ControlValueAccessor { @ Input ( ) progress ; onChange : Function ; private file : File | null = null ; @ HostListener ( 'change' , [ '$event.target.files' ] ) emitFiles ( event ) { const file = event && event . item ( 0 ) ; this . onChange ( file ) ; this . file = file ; } constructor ( private host ) { } writeValue ( value ) { this . host . nativeElement . value = '' ; this . file = null ; } registerOnChange ( fn ) { this . onChange = fn ; } registerOnTouched ( fn ) { } }