OpenAPI Generator typescript-axios multipart/form-data How to Use Generated Function

Question

I have a valid OpenAPI spec for a form with multipart/form-data containing a file and an additional text field. (generated from NestJS-Swagger, documented here)

It works from the Swagger UI, but I cannot figure out how to get the API code generated by the OpenAPI Generator for typescript-axios to work.

Here is the OpenAPI YAML

"/users/files":
  post:
    operationId: UsersController_addPrivateFile
    summary: "..."
    parameters: []
    requestBody:
      required: true
      content:
        multipart/form-data:
          schema:
            "$ref": "#/components/schemas/UploadFileDto"

...

UploadFileDto:
  type: object
  properties:
    file:
      type: file
      properties:
        file:
          type: string
          format: binary
      description: "..."
      example: "'file': <any-kind-of-binary-file>"
    user_id:
      type: string
      description: "..."
      example: cus_IPqRS333voIGbS
  required:
  - file
  - user_id

here is what it looks like working in Swagger UI

The Axios Output seems to respect the API (I've ellipsed non-related parts of these functions

public usersControllerAddPrivateFile(file: object, userId: string) {
    return UsersApiFp(this.configuration)
        .usersControllerAddPrivateFile(file, userId)
        .then((request) => request(this.axios, this.basePath));
}

async usersControllerAddPrivateFile(file, userId){
    const localVarAxiosArgs = await UsersApiAxiosParamCreator(
        configuration,
    ).usersControllerAddPrivateFile(file, userId);
    return (...) => {
        const axiosRequestArgs = {
            ...localVarAxiosArgs.options,
            ...
        };
        return axios.request(axiosRequestArgs);
    };
}

usersControllerAddPrivateFile(file, userId){
    ...
    const localVarFormParams = new FormData();
    localVarFormParams.append('file', file as any);
    localVarFormParams.append('user_id', userId as any);
    localVarHeaderParameter['Content-Type'] = 'multipart/form-data';
    ...
}

I'm calling the function like this

onFileUpload = () => {
    const formData = new FormData();
    formData.append('file', this.state.selectedFile);
    const usersApi = new UsersApi();
    usersApi.usersControllerAddPrivateFile(formData,this.state.data.user_id,);
};

logging on both client and server show the body is missing...despite the file and the user ID both being present

Answer 1

Reviewing the code generated it shows that the function just expects the raw file and bundles it inside the form data here:

usersControllerAddPrivateFile(file, userId){
    ...
    const localVarFormParams = new FormData();
    localVarFormParams.append('file', file as any);
    localVarFormParams.append('user_id', userId as any);
    localVarHeaderParameter['Content-Type'] = 'multipart/form-data';
    ...
}

thus simply updating the function call from

onFileUpload = () => {
    const formData = new FormData();
    formData.append('file', this.state.selectedFile);
    const usersApi = new UsersApi();
    usersApi.usersControllerAddPrivateFile(formData,this.state.data.user_id,);
};

to

const usersApi = new UsersApi();
usersApi.usersControllerAddPrivateFile(
    this.state.selectedFile,
    this.state.data.user_id,
);

resolves the issue