fix(explorer): respect encoding.contentType for multipart/form-data parts

OpenAPI encoding objects specify per-part Content-Type for multipart/form-data
but these were ignored, causing file parts to always send as
application/octet-stream regardless of the spec.

- setBody/buildPostmanRequest: thread encoding through and set contentType on
  sdk.FormParam for each field that declares one, so code snippets reflect
  the correct per-part Content-Type
- makeRequest: wrap file and string parts in a typed Blob when
  encoding.contentType is present so the actual HTTP request uses it
- Request/index.tsx: extract encoding from requestBody for the active
  content type and pass to both buildPostmanRequest and makeRequest
- CodeSnippets: accept requestBody prop and derive encoding from it so
  generated code snippets stay in sync

encoding.contentType may be comma-separated per OAS spec; the first value
is used.

Closes #1247

Author: sserrata

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -30,6 +30,7 @@ export interface Props {
   postman: sdk.Request;
   codeSamples: CodeSample[];
   maskCredentials?: boolean;
+  requestBody?: any;
 }
 
 function CodeTab({ children, hidden, className }: any): React.JSX.Element {
@@ -44,6 +45,7 @@ function CodeSnippets({
   postman,
   codeSamples,
   maskCredentials: propMaskCredentials,
+  requestBody,
 }: Props) {
   const { siteConfig } = useDocusaurusContext();
 
@@ -76,7 +78,9 @@ function CodeSnippets({
               const authOptions =
                 clonedAuth?.options?.[key] ??
                 clonedAuth?.options?.[comboAuthId];
-              placeholder = authOptions?.find((opt: any) => opt.key === key)?.name;
+              placeholder = authOptions?.find(
+                (opt: any) => opt.key === key
+              )?.name;
               obj[key] = cleanCredentials(obj[key]);
             } else {
               obj[key] = `<${placeholder ?? key}>`;
@@ -93,6 +97,8 @@ function CodeSnippets({
       })()
     : auth;
 
+  const encoding = requestBody?.content?.[contentType]?.encoding ?? undefined;
+
   // Create a Postman request object using cleanedAuth or original auth
   const cleanedPostmanRequest = buildPostmanRequest(postman, {
     queryParams,
@@ -104,6 +110,7 @@ function CodeSnippets({
     body,
     server,
     auth: cleanedAuth,
+    encoding,
   });
 
   // User-defined languages array

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/index.tsx

@@ -76,6 +76,9 @@ function Request({ item }: { item: ApiItem }) {
     ...headerParams,
   ];
 
+  const encoding =
+    item.requestBody?.content?.[contentType]?.encoding ?? undefined;
+
   const postmanRequest = buildPostmanRequest(postman, {
     queryParams,
     pathParams,
@@ -86,6 +89,7 @@ function Request({ item }: { item: ApiItem }) {
     body,
     server,
     auth,
+    encoding,
   });
 
   const delay = (ms: number) =>
@@ -175,7 +179,8 @@ function Request({ item }: { item: ApiItem }) {
         proxy,
         body,
         requestTimeout,
-        requestCredentials
+        requestCredentials,
+        encoding
       );
       if (res.headers.get("content-type")?.includes("text/event-stream")) {
         await handleEventStream(res);

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Request/makeRequest.ts

@@ -115,7 +115,8 @@ async function makeRequest(
   proxy: string | undefined,
   _body: Body,
   timeout: number = DEFAULT_REQUEST_TIMEOUT,
-  credentials?: RequestCredentials
+  credentials?: RequestCredentials,
+  encoding?: Record<string, { contentType?: string }>
 ) {
   const headers = request.toJSON().header;
 
@@ -227,12 +228,25 @@ async function makeRequest(
         const members = (request.body as any)?.formdata?.members;
         if (Array.isArray(members)) {
           for (const data of members) {
+            const partContentType = encoding?.[data.key]?.contentType
+              ?.split(",")[0]
+              .trim();
             if (data.key && data.value.content) {
-              myBody.append(data.key, data.value.content);
+              const blob = partContentType
+                ? new Blob([data.value.content], { type: partContentType })
+                : data.value.content;
+              myBody.append(data.key, blob);
             }
             // handle generic key-value payload
             if (data.key && typeof data.value === "string") {
-              myBody.append(data.key, data.value);
+              if (partContentType) {
+                myBody.append(
+                  data.key,
+                  new Blob([data.value], { type: partContentType })
+                );
+              } else {
+                myBody.append(data.key, data.value);
+              }
             }
           }
         }

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/buildPostmanRequest.ts

@@ -293,7 +293,11 @@ function tryDecodeJsonParam(value: string): any {
 }
 
 // TODO: this is all a bit hacky
-function setBody(clonedPostman: sdk.Request, body: Body) {
+function setBody(
+  clonedPostman: sdk.Request,
+  body: Body,
+  encoding?: Record<string, { contentType?: string }>
+) {
   if (clonedPostman.body === undefined) {
     return;
   }
@@ -336,14 +340,35 @@ function setBody(clonedPostman: sdk.Request, body: Body) {
       Object.entries(body.content)
         .filter((entry): entry is [string, NonNullable<Content>] => !!entry[1])
         .forEach(([key, content]) => {
+          const partContentType = encoding?.[key]?.contentType
+            ?.split(",")[0]
+            .trim();
           if (content.type === "file") {
-            params.push(new sdk.FormParam({ key: key, ...content }));
+            params.push(
+              new sdk.FormParam({
+                key: key,
+                ...content,
+                ...(partContentType && { contentType: partContentType }),
+              })
+            );
           } else if (content.type === "file[]") {
             content.value.forEach((file) =>
-              params.push(new sdk.FormParam({ key, value: file }))
+              params.push(
+                new sdk.FormParam({
+                  key,
+                  value: file,
+                  ...(partContentType && { contentType: partContentType }),
+                })
+              )
             );
           } else {
-            params.push(new sdk.FormParam({ key: key, value: content.value }));
+            params.push(
+              new sdk.FormParam({
+                key: key,
+                value: content.value,
+                ...(partContentType && { contentType: partContentType }),
+              })
+            );
           }
         });
       params.forEach((param) => {
@@ -391,6 +416,7 @@ interface Options {
   accept: string;
   body: Body;
   auth: AuthState;
+  encoding?: Record<string, { contentType?: string }>;
 }
 
 function buildPostmanRequest(
@@ -405,6 +431,7 @@ function buildPostmanRequest(
     body,
     server,
     auth,
+    encoding,
   }: Options
 ) {
   const clonedPostman = cloneDeep(postman);
@@ -532,7 +559,7 @@ function buildPostmanRequest(
     otherHeaders
   );
 
-  setBody(clonedPostman, body);
+  setBody(clonedPostman, body, encoding);
 
   return clonedPostman;
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/index.tsx

@@ -41,6 +41,7 @@ function ApiExplorer({
           postman={postman}
           codeSamples={(item as any)["x-codeSamples"] ?? []}
           maskCredentials={mask_credentials}
+          requestBody={item.requestBody}
         />
       )}
       <Request item={item} />