content-type in FormData for string part

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

@@ -10,7 +10,10 @@
 
 'use strict';
 
-type FormDataValue = string | {name?: string, type?: string, uri: string};
+type FormDataValue =
+  | string
+  | {name?: string, type?: string, uri: string}
+  | {type?: string, string: string};
 type FormDataNameValuePair = [string, FormDataValue];
 
 type Headers = {[name: string]: string, ...};
@@ -44,7 +47,7 @@ type FormDataPart =
  *   body.append('authToken', 'secret');
  *   body.append('photo', photo);
  *   body.append('title', 'A beautiful photo!');
- *
+ *   body.append('title', {type: 'application/json', string: JSON.stringify({text:'hello world'})});
  *   xhr.open('POST', serverURL);
  *   xhr.send(body);
  */
@@ -73,24 +76,34 @@ class FormData {
   getParts(): Array<FormDataPart> {
     return this._parts.map(([name, value]) => {
       const contentDisposition = 'form-data; name="' + name + '"';
-
       const headers: Headers = {'content-disposition': 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.type === 'string') {
           headers['content-type'] = value.type;
         }
-        return {...value, headers, fieldName: name};
+
+        // 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.uri === 'string') {
+          if (typeof value.name === 'string') {
+            headers['content-disposition'] += `; filename="${
+              value.name
+            }"; filename*=utf-8''${encodeURI(value.name)}`;
+          }
+          return {...value, headers, fieldName: name};
+        }
+
+        // The body part is a "string object", which in React Native just means
+        // an object with a `string` attribute. Optionally, it can also
+        // `type` attribute to specify content type
+        if (typeof value.string === 'string') {
+          return {string: String(value.string), headers, fieldName: name};
+        }
       }
+
       // Convert non-object values to strings as per FormData.append() spec
       return {string: String(value), headers, fieldName: name};
     });

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

@@ -130,4 +130,32 @@ describe('FormData', function () {
 
     expect(formData.getAll('file').length).toBe(0);
   });
+
+  it('should return string with custom content-type', function () {
+    formData.append('withText', {string: 'Alice', type: 'text/plain'});
+    formData.append('withJson', {
+      string: JSON.stringify({name: 'Bob'}),
+      type: 'application/json',
+    });
+
+    expect(formData.getParts().length).toBe(2);
+    expect(formData.getParts()[0]).toMatchObject({
+      string: 'Alice',
+      headers: {
+        'content-disposition': 'form-data; name="withText"',
+        'content-type': 'text/plain',
+      },
+      fieldName: 'withText',
+    });
+    expect(formData.getParts()[1]).toMatchObject({
+      // prettier-ignore
+      // eslint-disable-next-line quotes
+      string: "{\"name\":\"Bob\"}",
+      headers: {
+        'content-disposition': 'form-data; name="withJson"',
+        'content-type': 'application/json',
+      },
+      fieldName: 'withJson',
+    });
+  });
 });

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -5978,7 +5978,10 @@ declare export default typeof NativeSourceCode;
 `;
 
 exports[`public API should not change unintentionally Libraries/Network/FormData.js 1`] = `
-"type FormDataValue = string | { name?: string, type?: string, uri: string };
+"type FormDataValue =
+  | string
+  | { name?: string, type?: string, uri: string }
+  | { type?: string, string: string };
 type FormDataNameValuePair = [string, FormDataValue];
 type Headers = { [name: string]: string, ... };
 type FormDataPart =

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

@@ -96,7 +96,8 @@ declare var File: {
 
 type FormDataValue =
   | string
-  | {name?: string | undefined; type?: string | undefined; uri: string};
+  | {name?: string | undefined; type?: string | undefined; uri: string}
+  | {type?: string | undefined; string: string};
 
 type FormDataPart =
   | {