send file from form array with formData in angular 9

i have this form for send file in angular to server .

InitialFrom(): void {
 this.addAlbumFG = this.formBuilder.group({
   name: ['', Validators.compose([Validators.required])],
   gener: ['', Validators.compose([Validators.required])],
   signer: ['', Validators.compose([Validators.required])],
   albumPoster: ['', Validators.compose([Validators.required])],
   albumeProfile: ['', Validators.compose([Validators.required])],
   tracks: this.formBuilder.array([])
 });
}

and this is my formArray :

selectedLanguage(): FormGroup {
 return this.formBuilder.group({
  trackNumber: ['', Validators.compose([Validators.required])],
  trackName: ['', Validators.compose([Validators.required])],
  trackProfile: ['', Validators.compose([Validators.required])],
  trackPoster: ['', Validators.compose([Validators.required])],
  trackFile: ['', Validators.compose([Validators.required])]
 })
}

when i need send data from server i add data to this model :

export interface AddSongModel {
    name: string;
    gener: string;
    signer: string;
    albumeProfile:any;
    albumPoster:any;
    tracks:TrackMode[];
}

export interface TrackMode {
    trackNumber: number;
    trackName: string;
    trackProfile: any;
    trackPoster:any;
    trackFile: any;
}

when i click on the button i add data to model :

let addModel = {} as AddSongModel;
const selectedFiles = this.f.albumPoster.value;
const selectedPrfile = this.f.albumeProfile.value;
addModel = Object.assign({}, this.addAlbumFG.value);
addModel.albumPoster = selectedFiles['files'][0];
addModel.albumeProfile = selectedPrfile['files'][0];

for (let index = 0; index > this.addAlbumFG.controls['tracks'].value.length; index++) {
 const item= this.addAlbumFG.controls['tracks'].value[index];
 addModel.tracks.push({
    trackFile:item.trackFile['files'][0],
    trackNumber:item.trackNumber,
    trackName:item.trackName,
    trackPoster:item.trackPoster['files'][0],
    trackProfile:item.trackProfile['files'][0]
  })
}
console.log('add model',addModel)

and it show me this when i log data :

albumPoster: File {name: "One Kiss - CALVIN HARRIS ft DUA LIPA.mp3", lastModified: 1594883323701, lastModifiedDate: Thu Jul 16 2020 11:38:43 GMT+0430 (Iran Daylight Time), webkitRelativePath: "", size: 8628224, …}
albumeProfile: File {name: "One Kiss - CALVIN HARRIS ft DUA LIPA.mp3", lastModified: 1594883323701, lastModifiedDate: Thu Jul 16 2020 11:38:43 GMT+0430 (Iran Daylight Time), webkitRelativePath: "", size: 8628224, …}
gener: "5f08822042b526384cf5afe5"
name: "a"
signer: "5f0af9983c432f0ebcdc8799"
tracks:
   trackFile: FileInput {_files: Array(1), delimiter: ", ", _fileNames: "One Kiss - CALVIN HARRIS ft DUA LIPA.mp3"}
   trackName: "a"
   trackNumber: 1
   trackPoster: FileInput {_files: Array(1), delimiter: ", ", _fileNames: "One Kiss - CALVIN HARRIS ft DUA LIPA.mp3"}
   trackProfile: FileInput {_files: Array(1), delimiter: ", ", _fileNames: "One Kiss - CALVIN HARRIS ft DUA LIPA.mp3"}

and i send this model to sever with form data :

Create(item: any, url: string): Observable<any> {
    const Url = `${this.appConfig.apiEndpoint + url}`;
    const formData: FormData = new FormData();
    for (const key in item) {
        if (item.hasOwnProperty(key)) {

            if (item[key] instanceof File) {
                formData.append(key, item[key], item[key].name);
            } else {
                formData.append(key, item[key]);
            }
        }
    }
    return this.httpClient
        .post(Url, formData, {
            headers: this.headers,
            reportProgress: true,
            observe: 'events'
        })
        .pipe(map(response => response || {} as HttpEvent<any>));
}

but it send data to serve with form data :

enter image description here

how can i send data with file in form array to server ????

Source: New feed
Source Url send file from form array with formData in angular 9