OpenAPITools / OpenAPITools/openapi-generator

[typescript-fetch] Multipart/form-data doesnt work with requestBody (openapi 3.0.1)

Open
#4,844 3 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Client: TypeScript Issue: Bug
Dominant language
Java
Stars
26.8k
Forks
7.7k
PR merge metrics
PR metrics pending

Description

Bug Report Checklist
  • Have you provided a full/minimal spec to reproduce the issue?

  • Have you validated the input using an OpenAPI validator (example)?

  • What's the version of OpenAPI Generator used?

  • Have you search for related issues/PRs?

  • What's the actual output vs expected output?

  • [Optional] Bounty to sponsor the fix (example)

Description

In the generated code, the body is set as a JSON instead of a FormData.
Because of that, it goes through JSON.stringify when it goes through the createFetchParams function located in runtime.ts, and the file isnt included in the request.

openapi-generator version

1.0.8-4.2.2

OpenAPI declaration file content or url

https://gist.github.com/Lumyo/1a29079da92ee1c0b8b1f7415c99a42f

Command line used for generation

openapi-generator generate -i ./packages/server/swagger.yaml -g typescript-fetch --additional-properties=supportsES6=true,typescriptThreePlus=true,modelPropertyNaming=original -o packages/api/src

Steps to reproduce
  • Generate code
  • Upload a file through the uploadAttachment function
  • Resulting request won't include the file
Related issues/PRs
Suggest a fix

To Fix the issue, i had to do 2 modifications in the generated code.

1] Create the form data, instead of using IAttachmentUploadToJSON(requestParameters.IAttachmentUpload)

2] Remove the content type set, otherwise i have a "Boundary not found" error on the server side, when the file goes through multer

Annotation 2019-12-19 175335

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

Start with the typescript-fetch generated output and the createFetchParams entry point in runtime.ts, then reproduce the uploadAttachment request using the linked OpenAPI declaration and generation command. Compare the generated request body and headers with the expected multipart request; done means the file is included and the server accepts the request without a boundary error.

Written by the indexing model from the issue text.

Assessment

Tech stack
openapi, typescript
Domain
api, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.