Blob in body x-www-form-urlencoded generates a type error

What are the steps to reproduce this issue?

Suppose I have a path:

patch:
      description: |
        Used to update or replace Asset *Content* or *Description*.
      operationId: app.api_asset.patch
      parameters:
      - $ref: '#/components/parameters/p_asset_id'
      requestBody:
        $ref: '#/components/requestBodies/asset_patch_body'
      responses:
        '200':
          description: Patched
        '401':
          description: No authorisation token provided
        '403':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/as_error'
          description: You're not authorised to use this path
        '404':
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/as_error'
          description: Asset not found
      summary: Adjust an existing Asset
      tags:
      - asset

where asset_patch_body has a binary field

asset_patch_body:
      content:
        application/x-www-form-urlencoded:
          schema:
            properties:
              content_file:
                description: A file containing the content for the asset. You must
                  provide a value here or in content_string
                format: binary
                type: string
              content_string:
                description: The textual content of the asset. You must provide a
                  value here or in content_file
                type: string
              description:
                description: An optional description for the Asset
                type: string
            type: object
      description: Defines a new Asset content
      required: true

the generated function is the following.

export const patchAsset = (
  assetId: string,
  assetPatchBodyBody: AssetPatchBodyBody,
  options?: SecondParameter<typeof customInstance>,
) => {
  const formUrlEncoded = new URLSearchParams();
  if (assetPatchBodyBody.content_file !== undefined) {
    formUrlEncoded.append('content_file', assetPatchBodyBody.content_file);
//                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                          Argument of type 'Blob' is not assignable to parameter of type 'string'.ts(2345)
  }
  if (assetPatchBodyBody.content_string !== undefined) {
    formUrlEncoded.append('content_string', assetPatchBodyBody.content_string);
  }
  if (assetPatchBodyBody.description !== undefined) {
    formUrlEncoded.append('description', assetPatchBodyBody.description);
  }

  return customInstance<void>(
    {
      url: `/asset/${assetId}`,
      method: 'PATCH',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      data: formUrlEncoded,
    },
    options,
  );
};

What happens?

This has a type error Argument of type 'Blob' is not assignable to parameter of type 'string'.ts(2345).

What were you expecting to happen?

Since this is valid OpenAPI.yaml, I was expecting the Blob to be encoded (somehow)

Any logs, error output, etc?

Argument of type 'Blob' is not assignable to parameter of type 'string'.ts(2345)

Any other comments?

Promoting my discord thread (1275836308757151785) to an issue. Here I have made a suggestion of how we can encode this and make this work. Do you see any issues with this, or should I try to make a PR with this?

Here's my original message:

My backend dev has created a spec that uses application/x-www-form-urlencoded as the post Content-Type. It would be used to send a file along with some other fields that are strings. The reason behind this choice instead of multi-part form data is that the python package connexion has issues with testing multipart responses so we're trying this method.

Orval generates code with type errors here because it tried to directly append the blob to the form data instead of encoding it.

For example:

export const patchAsset = ( assetId: string, assetPatchBodyBody: AssetPatchBodyBody, options?: SecondParameter, ) => { const formUrlEncoded = new URLSearchParams(); if (assetPatchBodyBody.content_file !== undefined) { formUrlEncoded.append('content_file', assetPatchBodyBody.content_file); }

/ append other entries /

return customInstance( { url: /asset/${assetId}, method: 'PATCH', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: formUrlEncoded, }, options, ); };

I think changing this to an async function and awaiting the encoding of the blob would work? await assetPatchBodyBody.content_file.text().then((str) => encodeURIComponent(str)) Is this missing behaviour or intentional?

What versions are you using?

Please execute npx envinfo --system --npmPackages orval,zod,axios,msw,swr,@tanstack/react-query,@tanstack/vue-query,react,vue and paste the results here.

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor
    Memory: 969.65 MB / 9.72 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  npmPackages:
    @tanstack/react-query: 5.24.1 => 5.24.1 
    axios: 1.7.4 => 1.7.4 
    orval: 7.0.1 => 7.0.1

orval-labs / orval