added headers parameter to append function allowing to set custom headers for every part of a form data, added custom headers handling for each part in getParts function

Author: alicata

packages/react-native/Libraries/Network/FormData.js

@@ -11,7 +11,7 @@
 'use strict';
 
 type FormDataValue = string | {name?: string, type?: string, uri: string};
-type FormDataNameValuePair = [string, FormDataValue];
+type FormDataNameValueTuple = [string, FormDataValue, Headers];
 
 type Headers = {[name: string]: string, ...};
 type FormDataPart =
@@ -44,24 +44,25 @@ type FormDataPart =
  *   body.append('authToken', 'secret');
  *   body.append('photo', photo);
  *   body.append('title', 'A beautiful photo!');
+ *   body.append('someInfo', JSON.stringify({date:new Date()}, { "content-type": "application/json" }));
  *
  *   xhr.open('POST', serverURL);
  *   xhr.send(body);
  */
 class FormData {
-  _parts: Array<FormDataNameValuePair>;
+  _parts: Array<FormDataNameValueTuple>;
 
   constructor() {
     this._parts = [];
   }
 
-  append(key: string, value: FormDataValue) {
+  append(key: string, value: FormDataValue, headers?: Headers) {
     // The XMLHttpRequest spec doesn't specify if duplicate keys are allowed.
     // MDN says that any new values should be appended to existing values.
     // In any case, major browsers allow duplicate keys, so that's what we'll do
     // too. They'll simply get appended as additional form data parts in the
     // request body, leaving the server to deal with them.
-    this._parts.push([key, value]);
+    this._parts.push([key, value, headers]);
   }
 
   getAll(key: string): Array<FormDataValue> {
@@ -71,20 +72,26 @@ class FormData {
   }
 
   getParts(): Array<FormDataPart> {
-    return this._parts.map(([name, value]) => {
-      const contentDisposition = 'form-data; name="' + name + '"';
-
-      const headers: Headers = {'content-disposition': contentDisposition};
-
+    return this._parts.map(([name, value, originalHeaders]) => {
+      if (!originalHeaders) {
+        originalHeaders = {};
+      }
+      const isContentDispositionNeeded =
+        !originalHeaders['content-disposition'];
+      const contentDisposition: Partial<Headers> = isContentDispositionNeeded
+        ? {'content-disposition': 'form-data; name="' + name + '"'}
+        : {};
+      const headers: Headers = {
+        ...originalHeaders,
+        ...contentDisposition,
+      };
       // The body part is a "blob", which in React Native just means
       // an object with a `uri` attribute. Optionally, it can also
       // have a `name` and `type` attribute to specify filename and
       // content type (cf. web Blob interface.)
       if (typeof value === 'object' && !Array.isArray(value) && value) {
-        if (typeof value.name === 'string') {
-          headers['content-disposition'] += `; filename="${
-            value.name
-          }"; filename*=utf-8''${encodeURI(value.name)}`;
+        if (typeof value.name === 'string' && isContentDispositionNeeded) {
+          headers['content-disposition'] += '; filename="' + value.name + '"';
         }
         if (typeof value.type === 'string') {
           headers['content-type'] = value.type;

packages/react-native/types/modules/globals.d.ts

@@ -111,7 +111,7 @@ type FormDataPart =
     };
 
 declare class FormData {
-  append(name: string, value: any): void;
+  append(name: string, value: any, headers: {[key: string]: string}): void;
   getAll(): Array<FormDataValue>;
   getParts(): Array<FormDataPart>;
 }