Is it feasible to send both form data and an image file to a web API from an Angular 6 application?
app.component.ts
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
const reader = new FileReader();
reader.onload = e => this.selectedImage = reader.result.toString();
this.fileName = event.target.files[0].name;
reader.readAsDataURL(this.imageToUpload);
}
}
createNewComitteeMember() {
var mServiceObject = {
ComitteeMemberName: this.comittee_Member_Name.value,
ComitteeMemberNumber: this.comittee_Member_Number.value,
ComitteeMemberType: this.comittee_Type.value,
ComitteeMemberTypeOthers: this.comittee_Type_Others.value,
ComitteeMemberPosition: this.comittee_Member_Position.value,
ComitteeMemberPositionOthers: this.comittee_Member_Position_Others.value,
ComitteeMemberStatus: this.comittee_Member_Status.value
}
this.dmlService.CreateNewComitteeMember(mServiceObject, this.imageToUpload ).subscribe(data => {
console.log(data);
});
}
service.ts
CreateNewComitteeMember(mFormData,mImage){
// How can I combine the mFormData and mImage here and pass them to the web API?
}
Could someone assist me in resolving this issue.