[BUG] OpenAPI-Generator Implementation of Multipart-Request not Working for Multi-File-Upload

Bug Report Checklist

• Have you provided a full/minimal spec to reproduce the issue?
• Have you validated the input using an OpenAPI validator (example)?
• Have you tested with the latest master to confirm the issue still exists?
• Have you searched for related issues/PRs?
• What's the actual output vs expected output?
• [Optional] Sponsorship to speed up the bug fix or feature request (example)

Description

Hello there! I first tried to ask this question on StackOverflow, but as that post didn't gain any traction and the issue I'm having might as well be a bug, I'm reporting it here.

We build our API using an OpenAPI 3.0.0 schema and generate typescript-code that is used for the frontend-part of our application. We have defined an endpoint, that should be able to consume multiple files and upload them to the backend. This is how the requestbody of the endpoint looks:

requestBody:
  content:
    multipart/form-data:
      schema:
        properties:
          images:
            type: array
            items:
              type: string
              format: binary
        required:
          - images

A similar definition was found on the OpenAPI-webpage about file-uploads and on multiple posts here on Stackoverflow.

When the API is generated, images is expected to be of type Array<Blob>. The endpoint is called, when the input of a file-input-element changes on the frontend-side. More specifically, the endpoint is called like with this function:

const onInputChange = useCallback(() => {
  const files = inputRef.current.files; // React.useRef that's passed in as ref for the html input-element
  uploadImages(Array.from(files)); // uploadImages is the function that calls the endpoint
}, [inputRef, api]);

In this case, the API-validation always returns a HTTP-Response with statuscode 400 - Bad Request. Looking at the implementation, that the OpenAPI-generator generated, the images-property is appended to the form like this:

if (requestParameters.images) {
    formParams.append('images', requestParameters.images.join(runtime.COLLECTION_FORMATS["csv"]));
}

when we now look at the HTTP-request, that this code produces, we can see something like this in the Form Data:

------WebKitFormBoundaryItlGaGOpZu9sgAgS
Content-Disposition: form-data; name="images"

[object File],[object File]
------WebKitFormBoundaryItlGaGOpZu9sgAgS--

where one instance of [object File] is appended for every image that was selected in the choose-file-dialog.

The endpoint was working before for single-image-upload. In this case, the generated code to append the image to the request was:

if (requestParameters.file !== undefined) {
    formParams.append('file', requestParameters.file as any);
}

and the Form Data in the request looked like this:

------WebKitFormBoundaryIDujfCP9peNvyEE0
Content-Disposition: form-data; name="file"; filename="IMAGENAME.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryIDujfCP9peNvyEE0--

Are we calling the endpoint wrong in the multi-file-case? Is this functionality not working properly with the OpenAPI-generator for typescript?

I will happily provide further information if needed.

openapi-generator version

2.3.5

OpenAPI declaration file content or url

Generation Details

Steps to reproduce

Provided above

Related issues/PRs

Suggest a fix

Run the OpenAPI 3.0 multipart/form-data schema from the report through the TypeScript generator and inspect the generated request code for the images array. Compare its multipart output with the working single-file example; done means each selected file is sent as a separate file part rather than a comma-joined string.