I get error property name when upload data ?

Question

I work on angular 7 project  I face issue I get error Name when upload data 

 

core.js:4197 ERROR TypeError: Cannot read property 'name' of undefined
    at UploadComponent.uploadFile (upload.component.ts:96)
    at UploadComponent_Template_button_click_5_listener (upload.component.html:6)
    at executeListenerWithErrorHandling (core.js:14286)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14321)
    at HTMLButtonElement.<anonymous> (platform-browser.js:582)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27394)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

I get this error on line below :

 

formData.append('file', fileToUpload, fileToUpload.name);

 full uplod code 

 

component.html

<div class="col-md-3">
   <input type="file" #file placeholder="Choose file"  multiple>


   <button type="button" class="btn btn-success" (click)="uploadFile(file)">Upload File</button>
 </div>

 component.ts

public uploadFile = (files) => {
    if (files.length === 0) {
      return;
    }

    let fileToUpload = <File>files[0];
    const formData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);

    this.http.post('https://localhost:44396/api/ApprovalQuality/', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        console.log("success");
        console.log(event.type);
        if (event.type === HttpEventType.UploadProgress)
        {
         console.log("progress");
          this.progress = Math.round(100 * event.loaded / event.total);
        }
        else if (event.type === HttpEventType.Response) {
          this.message = 'Upload success.';
          this.onUploadFinished.emit(event.body);
        }
      });
  }

so How to solve this error please ?