Typescript Error: Property 'files' does not exist on type 'HTMLElement'

Question

I wish to create an upload function for my Apps by using IONIC.

Here is my HTML code:

<input ion-button block type="file" id="uploadBR">
<input ion-button block type="file" id="uploadIC">
<button ion-button block (click)="upload()">Confirm Claim Restaurant</button>

Here is my upload() function:

upload(){   
   let BR = document.getElementById('uploadBR').files[0]
   let IC = document.getElementById('uploadIC').files[0]
   console.log(BR)
   console.log(IC)    
 }

In normal HTML it should work, but it doesn't work with my IONIC.

When building the App, it will show the error Typescript Error: Property 'files' does not exist on type 'HTMLElement'.

Am i do it in wrong way or it has to be done in different way with typescript?

Thanks.

Answer 1

You neet to cast it as a HTMLInputElement as files is a property of input element

let BR = (<HTMLInputElement>document.getElementById('uploadBR')).files[0];