is that possible to send FormData along with Image file to web API from Angular 6 application

user_9956391 0
Viewed 4236

Is it possible to pass the form data along with image file to web api from 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){
// here how can I merge the mFormData and mImage and pass it to the web API
}

can anyone help me to solve this .

angular4-forms angular6 angular typescript
4 Answers

You can make use of FormData over here

CreateNewComitteeMember(mFormData,mImage){
  const HttpUploadOptions = {
    headers: new HttpHeaders({ "Content-Type": "multipart/form-data"})
  }
  const formData = new FormData();
  formData.append('data', mFormData);
  formData.append('image', mImage);
  return this.httpClient.post(url, formData, HttpUploadOptions)
}

For more info about FormData

user_74401600

To merge two objects into one you can simply do something like:

createNewComitteeMember(mFormData, mImage) {
   mFormData['image'] = mImage;
}

The main issue with what you are presenting is that HTTP has a limit to the amount of data you can POST. To get around this you need to set the Content-Type Header to 'multipart/form-data'. This means it will take HTTP multiple trips to the server to get all the data across, so combining the data together seems to be not necessary, but if you must

user_28370650

You can use FormData

service:

checkdata(selectedFile:File){
        let httpheader = new HttpHeaders();
        let options={
            headers: httpheader
        };
        const uploadData = new FormData();
        uploadData.append('File', selectedFile, selectedFile.name);
        return  this.http.post('uri',uploadData,options)
    }

component:

 onSelectFile(event) {
       if (event.target.files && event.target.files[0]) {
           this.imageToUpload = event.target.files[0];
           this.Yourservice.checkdata(this.imageToUpload)
      }
  }
user_98124000

you can try using this method it worked for me

const formdata = new FormData();
formdata.append("userData", this.userData.value);
formdata.append("image", this.uploadedFile.value);
user_157476610
Related