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 :
how can i send data with file in form array to server ????
