[typescript-inversify] Fix multipart form uploads (#4131)

* Fix multipart form uploads

* Update modules/openapi-generator/src/main/resources/typescript-inversify/HttpClient.mustache

Co-Authored-By: Esteban Gehring <[email protected]>

* re-generate samples

Author: siada

modules/openapi-generator/src/main/resources/typescript-inversify/HttpClient.mustache

@@ -51,6 +51,12 @@ class HttpClient implements IHttpClient {
     };
 
     private performNetworkCall(url: string, method: string, body?: any, headers?: Headers): Observable<HttpResponse> {
+
+        // when using fetch & a multipart upload, the requests content-type is handled by the browser, so should be left unset otherwise the multipart boundry is not added
+        if(headers && headers["Content-Type"] === "multipart/form-data") {
+            delete headers["Content-Type"];
+        }
+
         let promise = window.fetch(url, {
             method: method,
             body: body,

modules/openapi-generator/src/main/resources/typescript-inversify/api.service.mustache

@@ -152,7 +152,12 @@ export class {{classname}} {
 
 {{#hasFormParams}}
         let formData: FormData = new FormData();
+        {{#isMultipart}}
+        headers['Content-Type'] = 'multipart/form-data';
+        {{/isMultipart}}
+        {{^isMultipart}}
         headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+        {{/isMultipart}}
 {{#formParams}}
         {{#isListContainer}}
         if ({{paramName}}) {
@@ -174,7 +179,7 @@ export class {{classname}} {
 {{/formParams}}
 
 {{/hasFormParams}}
-        const response: Observable<HttpResponse<{{#returnType}}{{{returnType}}}{{#isResponseTypeFile}}|undefined{{/isResponseTypeFile}}{{/returnType}}{{^returnType}}any{{/returnType}}>> = this.httpClient.{{httpMethod}}(`${this.basePath}{{{path}}}{{#hasQueryParams}}?${queryParameters.join('&')}{{/hasQueryParams}}`{{#bodyParam}}, {{paramName}} {{/bodyParam}}{{#hasFormParams}}, body{{/hasFormParams}}, headers);
+        const response: Observable<HttpResponse<{{#returnType}}{{{returnType}}}{{#isResponseTypeFile}}|undefined{{/isResponseTypeFile}}{{/returnType}}{{^returnType}}any{{/returnType}}>> = this.httpClient.{{httpMethod}}(`${this.basePath}{{{path}}}{{#hasQueryParams}}?${queryParameters.join('&')}{{/hasQueryParams}}`{{#bodyParam}}, {{paramName}} {{/bodyParam}}{{#hasFormParams}}, formData{{/hasFormParams}}, headers);
         if (observe == 'body') {
                return response.pipe(
                    map(httpResponse => <{{#returnType}}{{{returnType}}}{{#isResponseTypeFile}}|undefined{{/isResponseTypeFile}}{{/returnType}}{{^returnType}}any{{/returnType}}>(httpResponse.response))

samples/client/petstore/typescript-inversify/HttpClient.ts

@@ -46,6 +46,12 @@ class HttpClient implements IHttpClient {
     };
 
     private performNetworkCall(url: string, method: string, body?: any, headers?: Headers): Observable<HttpResponse> {
+
+        // when using fetch & a multipart upload, the requests content-type is handled by the browser, so should be left unset otherwise the multipart boundry is not added
+        if(headers && headers["Content-Type"] === "multipart/form-data") {
+            delete headers["Content-Type"];
+        }
+
         let promise = window.fetch(url, {
             method: method,
             body: body,

samples/client/petstore/typescript-inversify/api/pet.service.ts

@@ -276,7 +276,7 @@ export class PetService {
             formData.append('status', <any>status);
         }
 
-        const response: Observable<HttpResponse<any>> = this.httpClient.post(`${this.basePath}/pet/${encodeURIComponent(String(petId))}`, body, headers);
+        const response: Observable<HttpResponse<any>> = this.httpClient.post(`${this.basePath}/pet/${encodeURIComponent(String(petId))}`, formData, headers);
         if (observe == 'body') {
                return response.pipe(
                    map(httpResponse => <any>(httpResponse.response))
@@ -311,15 +311,15 @@ export class PetService {
         headers['Accept'] = 'application/json';
 
         let formData: FormData = new FormData();
-        headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
+        headers['Content-Type'] = 'multipart/form-data';
         if (additionalMetadata !== undefined) {
             formData.append('additionalMetadata', <any>additionalMetadata);
         }
         if (file !== undefined) {
             formData.append('file', <any>file);
         }
 
-        const response: Observable<HttpResponse<ApiResponse>> = this.httpClient.post(`${this.basePath}/pet/${encodeURIComponent(String(petId))}/uploadImage`, body, headers);
+        const response: Observable<HttpResponse<ApiResponse>> = this.httpClient.post(`${this.basePath}/pet/${encodeURIComponent(String(petId))}/uploadImage`, formData, headers);
         if (observe == 'body') {
                return response.pipe(
                    map(httpResponse => <ApiResponse>(httpResponse.response))