[W-12465439] Missing boundary for multipart content type

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@api-components/api-request",
   "description": "A set of composite components that are used to build an HTTP request editor with the support of the AMF model.",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "Apache-2.0",
   "main": "index.js",
   "module": "index.js",

src/ApiRequestEditorElement.js

@@ -793,6 +793,15 @@ export class ApiRequestEditorElement extends AmfHelperMixin(EventsTargetMixin(Li
     });
 
     if (['GET', 'HEAD'].indexOf(result.method) === -1) {
+      const payload = this._payload
+      if (payload instanceof FormData) {
+        const contentType = HeadersParser.contentType(result.headers)
+        // According to form data documentation: do not explicitly set the Content-Type header on the request. Doing so will prevent
+        // the browser from being able to set the Content-Type header with the boundary expression it will use to delimit form fields in the request body.
+        if (contentType && contentType.startsWith('multipart/')) {
+          result.headers = /** @type string */ (HeadersParser.replace(result.headers, 'content-type', null));
+        }
+      }
       result.payload = this._payload;
     }
 

test/ApiRequestEditorElement.test.js

@@ -1054,12 +1054,12 @@ describe('ApiRequestEditorElement', () => {
       element.url = 'some-url';
     });
 
-    it('should not remove multipart content type if form data payload', () => {
+    it('should remove multipart content type if form data payload', () => {
       element._headers = 'content-type: multipart/form-data';
       element._payload = new FormData()
       const request = element.serializeRequest()
 
-      assert.equal(request.headers, 'content-type: multipart/form-data');
+      assert.equal(request.headers, '');
     });
 
     it('should not modify headers if content type not defined and form data payload', () => {
@@ -1069,6 +1069,14 @@ describe('ApiRequestEditorElement', () => {
 
       assert.equal(request.headers, '');
     });
+
+    it('should not modify headers if content type not multipart and form data payload', () => {
+      element._headers = 'content-type: application/x-www-form-urlencoded';
+      element._payload = new FormData()
+      const request = element.serializeRequest()
+
+      assert.equal(request.headers, 'content-type: application/x-www-form-urlencoded');
+    });
   });
 
   describe('allowHideOptional', () => {