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.
