[Bug] [iOS | Android] FormData object containing null or undefined value is not serialized correctly

Describe the bug it is giving this error with that form data post is not working. i am using capacitor to wrap all of my ionic native. It will cause same error for ionic native with cordova too

error

{mobile: "2343434343", first_name: "sdsd", last_name: "", address: null, attended_by: undefined, …}
"form value"
[Error] ERROR
Error: Uncaught (in promise): TypeError: null is not an object (evaluating 'value.toString') append@user-script:39:22:20 saveCustomerDetail@capacitor://localhost/common.js:535:24 capacitor://localhost/manage-details-manage-details-module.js:315:60 onInvoke@capacitor://localhost/vendor.js:64589:39 run@capacitor://localhost/polyfills.js:3155:49 capacitor://localhost/polyfills.js:3915:37 onInvokeTask@capacitor://localhost/vendor.js:64580:43 runTask@capacitor://localhost/polyfills.js:3200:57 drainMicroTaskQueue@capacitor://localhost/polyfills.js:3606:42 promiseReactionJob@[native code]
resolvePromise — zone.js:852
(anonymous function) — zone.js:917
onInvokeTask — core.js:26760
runTask — zone.js:195
drainMicroTaskQueue — zone.js:601
promiseReactionJob
capacitorConsole (user-script:2:78)
defaultErrorLogger (vendor.js:45196)
handleError (vendor.js:45244)
next (vendor.js:65090:140)
(anonymous function) (vendor.js:62233)
__tryOrUnsub (vendor.js:100876)
next (vendor.js:100814)
_next (vendor.js:100760)
next (vendor.js:100737)
next (vendor.js:100503)
emit (vendor.js:62217)
run (polyfills.js:3155)
onHandleError (vendor.js:64611)
runGuarded (polyfills.js:3169)
_loop_1 (polyfills.js:3720)
microtaskDrainDone (polyfills.js:3729)
drainMicroTaskQueue (polyfills.js:3613)
promiseReactionJob[Log]  (2) (user-script:2, line 78)

System info

• affected HTTP plugin version: [e.g. 2.1.1] 2.3.1
• affected platform(s) and version(s): [e.g. iOS 12.2] Android/iOS has same issue
• affected device(s): [e.g. iPhone 8] All
• cordova version: [e.g. 6.5.0] @capacitor/core : 1.4.0
• cordova platform version(s): [e.g. android 7.0.0, browser 5.0.3]

Are you using ionic-native-wrapper? –capacitor - @capacitor/core : 1.4.0

• ionic-native-wrapper version: [e.g. 5.8.0]
• did you check ionic-native issue tracker for your problem? yes

Minimum viable code to reproduce If applicable, add formatted sample coding to help explain your problem.

e.g.:

declare const cordova: any;

const form = new cordova.plugin.http.ponyfills.FormData()
     for(let key in customerDetail) {
       form.append(key, customerDetail[key])
     }
    console.log(form, "formDataforFile")
    this._http.setDataSerializer("multipart");
    return this._http.post(
      `${environment.apiUrl}/saveWalkingForm`,
      form,
      { "content-type": "application/json" }
    );

Here is example app to reproduce.

Step 1 : click on post button Step 2 : You will see above error in console.

Repo: https://github.com/indraraj26/capacitor-advanced-http-formData Apk: https://github.com/indraraj26/capacitor-advanced-http-formData/blob/master/app-debug.apk

If i use formData with httpClient from angular. It is working fine.

 const form = new FormData();
    for (let key in detail) {
      form.append(key, detail[key]);
    }
    console.log(form, 'formDataforFile');
  
    return this._httpClient
      .post('https://jsonplaceholder.typicode.com/posts', form)
      .toPromise();

[silkimen]

I’ve checked the behavior in chrome. Following code:

const fd = new FormData();
const xhr = new XMLHttpRequest();

fd.append('test', null);
fd.append('test2', undefined);

xhr.open('post', 'http://httpbin.org/anything');
xhr.send(fd);

… results in following raw data:

So the entries need to be converted to the string representation. I’ll fix this one.

[SSuarezBrooktec]

I solve it with object empty on params -> {}