File does not exits on event Target-CodePudding

I am working on an angular project for the first time which collects data from products. While everything works perfectly file ,i am getting error in the html file of image upload. I am getting this error Property 'files' does not exist on type 'EventTarget'.

This is the html file

    <div >
        <label for="Product Image" >Product Image:</label>
        <div >
            <input type="file" id="photo" name="photo" (change)="handleFileInput($event.target.files)">
        </div>
    </div>

And this is my .ts file

export class AddProductComponent implements OnInit {
  model:any={}
  fileToUpload: File = null;
  handleFileInput(files:FileList){
  this.fileToUpload=files.item(0);
  console.log(this.fileToUpload);
  const formData: FormData = new FormData();
  formData.append('Image', this.fileToUpload);
  this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
  console.log(res);
  });
}

Can someone help me...

CodePudding user response：

don't pass the files as argument, pass the whole $event instead:

<div >
    <label for="Product Image" >Product Image:</label>
    <div >
        <input type="file" id="photo" name="photo" (change)="handleFileInput($event)">
    </div>
</div>

handleFileInput(event){
     this.fileToUpload=event.target.files[0];
     console.log(this.fileToUpload);
     const formData: FormData = new FormData();
     formData.append('Image', this.fileToUpload);
    
 this.http.post('http://localhost:3000/upload',formData).subscribe((res)=>{
     console.log(res);
  });