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

user_2422826 0
Viewed 2648

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

working swagger docs for multipart form data with additional form field

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

enter image description here

enter image description here

openapi-generator axios openapi multipartform-data
1 Answers

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

user_24228260
Related