how get filename the uploaded from array and save filename

Question

 how get filename the uploaded from array and save filename

 

angular 7

import { Component, OnInit ,Output, EventEmitter, Injectable} from '@angular/core';
import { HttpEventType, HttpClient } from '@angular/common/http';

Injectable({
  providedIn: 'root'
})

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {
  fileToUpload : File = null;
  imageUrl : string = "/assets/img/default-image.png";

  public progress: number;
  public message: string;
  @Output() public onUploadFinished = new EventEmitter();
   constructor(private http: HttpClient) { }

  ngOnInit() {
  }
  public imagepath :string;

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

    }

    let filesToUpload : File[] = files;
    const formData = new FormData();

    Array.from(filesToUpload).map((file, index) => {

      return formData.append('file'+index, file, file.name);
      var xs = file.name;


    });



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



}

<div class="row" style="margin-bottom:15px;">
  <div class="col-md-3">
 <input type="file" #file placeholder="Choose file" (change)="uploadFile(file.files)" style="display:none;" multiple>

    <button t  type="button" class="btn btn-success" (click)="file.click()">Upload File</button>
  </div>
  <div class="col-md-4">
    <span class="upload" *ngIf="progress > 0">
      {{progress}}%
    </span>
    <span class="upload" *ngIf="message">
      {{message}}
    </span>
  </div>
</div>

this method work but can't get file name from input because file input create in run time

 

 

//get filename the uploaded
 files: any[];

 onClickUploadDocument(event){
     console.log("clicked");
     var file = event.target.files;
     this.files = []; // clear the array before pushing your values into it.

   //  console.log(file);
     for (let i = 0; i < file.length; i++) {
       let fileInfo = file[i];
     //  console.log(fileInfo);
       this.files.push(fileInfo);
  }
 }

<input type="file" id="uploadFile" style="display: none" (change)='onClickUploadDocument($event)' multiple>
<label for="uploadFile" class="btn btn-primary">Upload Documents</label>
<table cellpadding="4" class="grid" >
<tbody>
<tr *ngFor="let file of files ;let i = index">
<td> {{i}}</td>
<input type="text" name="id" #id="ngModel" [(ngModel)]=file.name>

</tr>
</tbody>
</table>