Pass Object to Angular FormData

Question

I want to pass document field in my form as an object like

formData.append('document', {
      uri: this.fileUrl,
      type: this.file.type,
      name: this.file.name
    });

There are multiple fields which I use like

const formData: any = new FormData();
    sellerType.map(x => {
      formData.append('sellerType', x);
    });
    formData.append('name', this.sellerRegisterForm.value.sellerName);
    formData.append('email', this.sellerRegisterForm.value.email);
    formData.append('password', this.sellerRegisterForm.value.password);
    formData.append('contactNo', this.sellerRegisterForm.value.contactNo);
    formData.append('comp_name', this.companyRegisterForm.value.companyName);
    formData.append('comp_contactNo', this.companyRegisterForm.value.contactNo);
    formData.append('document', {
      uri: this.fileUrl,
      type: this.file.type,
      name: this.file.name
    });

but it is not accepting !! Please anyone can help me with this or if I'm doing anything wrong then please corrent my code that how can I pass this kind of object in formdata...

but there is also one issue when I pass only a single string it will take in the req object but when I pass document as an object it will not take anything in the request header it shows `Content-Disposition: form-data; name="document" [object Object] ` — radhika thakkar, Oct 18 '20 at 18:45
Does this answer your issue- https://stackoverflow.com/questions/49692745/express-using-multer-error-multipart-boundary-not-found-request-sent-by-pos — Meghshyam Sonar, Oct 18 '20 at 19:13
@FaizalHussain i tried with removing the content type still it shows `document: [object Object]` in request object — radhika thakkar, Oct 19 '20 at 05:27
@radhikathakkar as per FormData docs, you can pass either string or Blob object as second argument in append method. Objects are not allowed. https://developer.mozilla.org/en-US/docs/Web/API/FormData/append — pathe.kiran, Nov 02 '22 at 08:46

score 0 · Answer 1 · answered Nov 02 '22 at 08:30

You have to pass 3 separate fields via formData and need to prepare document object by reading those properties from formData at the API side.

formData.set("documentfileUrl", this.fileUrl);
formData.set("documenttype", this.file.type);
formData.set("documentname", this.file.name);

API side:

Document document = new Document();
document.fileUrl = formData.get("documentfileUrl");
document.type = formData.get("documenttype");
document.name = formData.get("documentname");

Pass Object to Angular FormData

1 Answers1