error Cannot read property 'files' of undefined when press button upload file

I work on angular 7 project

I face issue when select file then press button upload to get selected file

then it show error Cannot read property 'files' of undefined

as below

DeliverySystemComponent.html:25 ERROR TypeError: Cannot read property 'files' of undefined
   

and that actually my issue

so How to solve this issue

what I try is

delivery html component

<app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
      nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

<button (click)="uploadFile(files)" class="btn btn-link" style="margin-right: 0px">
          <i nbTooltip="Import Template" nbTooltipPlacement="bottom" nbTooltipStatus="primary">
            <nb-icon icon="cloud-upload-outline"></nb-icon>
          </i>
        </button>

delivery component type script

fileToUpload: File = null;
handleFileInput(files: FileList) {
  if (files.length == 0) {
      return;
    }  
 
  this.fileToUpload = files.item(0);
 
} 
public uploadFile = (files) => {
   
  const formData = new FormData();
  
  formData.append('file', this.fileToUpload,this.fileToUpload.name);
 }

when using

<input type="file"  
             id="file"  
             (change)="handleFileInput($event.target.files)"> 

instead of

  <app-custom-upload #cusUpload nbTooltip="upload excel file" nbTooltipPlacement="bottom"
          nbTooltipStatus="primary" (complete)="handleFileInput($event.target.files)"></app-custom-upload>

it working so what is issue and how to solve it