swagger-api / swagger-api/swagger-codegen

TypeScript Fetch client doesn't support multipart/form-data body

Open
#3,921 7 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Client: TypeScript help wanted Issue: Bug
Dominant language
Mustache
Stars
17.8k
Forks
6k
PR merge metrics
No merged PRs in 30d

Description

Description

If a POST operation accepts multipart/form-data, the typescript-fetch client posts an application/x-www-form-urlencoded body instead of form data.

Swagger-codegen version

Version currently deployed on [editor.swagger.io]

Swagger declaration file content or url
swagger: '2.0'
info: { version: 0.1.0, title: Multipart Upload }
paths:
  /:
    post:
      operationId: upload
      consumes:
        - multipart/form-data
      parameters:
        - name: file
          in: formData
          required: true
          type: file
      responses: { '200': { description: Successful upload } }
Command line used for generation

"Generate Client" -> "TypeScript Fetch" on [editor.swagger.io]

Steps to reproduce
  1. Generate and compile the sample config
  2. Call it with a file
  3. Log the request, it has a Content-Type of application/x-www-form-urlencoded instead of multipart/form-data.
Suggest a Fix

Instead of setting the Content-Type and using querystring to serialize the contents (for multipart/form-data requests), it should just set the body to an instance of FormData instead of

e.g., in DefaultApiFetchParamCreactor#upload, instead of :

let contentTypeHeader: Dictionary<string>;
contentTypeHeader = { "Content-Type": "application/x-www-form-urlencoded" };
fetchOptions.body = querystring.stringify({ 
  "file": params.file,
});
if (contentTypeHeader) {
  fetchOptions.headers = contentTypeHeader;
}

it should generate (as Content-Type is set to multipart/form-data automatically if using FormData):

const formData = new FormData();
formData.append("file", params.file);
fetchOptions.body = formData;

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the Swagger 2.0 multipart example through the TypeScript Fetch generator and inspect the generated DefaultApiFetchParamCreactor#upload entry point. Compare its handling of multipart/form-data with the generated request shown in the issue; done means the request uses FormData and no longer sends application/x-www-form-urlencoded.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.