Upload Zip file error on executing the Angular Code

Question

I'm having the below Typescript file for uploading the Zip file:

fileUploader(event:Event):void{
   const target = event.target as HTMLTextAreaElement;
   this.fileInfo= target.files[0];
 }
 onNoClick(): void {
   this.dialogRef.close({location: this.lastNode, cancel: true});
 }
 closeDialog(): void {
  console.log(this.versionNote);
  let data={'file':this.fileInfo,'versionNote':this.versionNote};
   this.dialogRef.close(data);
 }

Html for the above file:

<h1 mat-dialog-title>{{'DOCUMENT_LIST.CONTENT.UPLOAD_ZIP' | translate}}</h1>
<div><span class="ng-star-inserted"><h3><b>Folder Name: &nbsp;{{folderName}}</b></h3></span></div>
<input type="file" id="file" [(ngModel)]="playerName"  (change)="fileUploader($event)">
 <p>
  <mat-form-field class="example-full-width">
     <textarea matInput placeholder="Notes" [(ngModel)]="versionNote"></textarea>
   </mat-form-field>
 </p>
<div mat-dialog-actions>
 <button mat-button (click)="onNoClick()">{{'OPTIONS.CANCEL' | translate}}</button>
 <button mat-button cdkFocusInitial (click)="closeDialog()">{{'OPTIONS.UPLOAD' | translate}}</button>
</div>

I'm getting the below error while running:

Property 'files' does not exist on type 'HTMLTextAreaElement'.

Answer 1

HTMLTextAreaElement element does not have files property.

change HTMLTextAreaElement to HTMLInputElement

const target = event.target as HTMLInputElement;