[Bug]: CapacitorHttp breaks axios requests with `multipart/form-data`

[alex-mironov]

Capacitor Version

Latest Dependencies:

  @capacitor/cli: 6.1.1
  @capacitor/core: 6.1.1
  @capacitor/android: 6.1.1
  @capacitor/ios: 6.1.1

Installed Dependencies:

  @capacitor/cli: 6.1.1
  @capacitor/core: 6.1.1
  @capacitor/android: 6.1.1
  @capacitor/ios: 6.1.1

Other API Details

No response

Platforms Affected

• [X] iOS
• [X] Android
• [ ] Web

Current Behavior

axios request with Content-Type: "multipart/form-data" is not working. It doesn't send neither Content-Length, Content-Type no content itself.

It happens when CapacitorHttp plugin is enabled.

I have a simple form allowing uploading files.

                <input
                  title="Attach files"
                  type="file"
                  accept="image/*"
                  multiple
                  onChange={handleChange}
                />

and handler

  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    const fileFirst = files?.item(0)
    if (!fileFirst) return

    const formData = new FormData();
    formData.append('file', fileFirst);

    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    });
    console.log('File uploaded successfully:', response.status);
  };

capacitor.config.ts

import { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  // ....
  plugins: {
    CapacitorHttp: {
      enabled: true,
    },
    // ...
  },
};

export default config;

Expected Behavior

axios should work no matter if CapacitorHttp enabled or not

Project Reproduction

-

Additional Information

No response

[alex-mironov]

Repo with reproduction: https://github.com/alex-mironov/capacitor-axios-issue/blob/main/src/App.tsx

[ionitron-bot[bot]]

This issue has been labeled as type: bug. This label is added to issues that that have been reproduced and are being tracked in our internal issue tracker.

[michaelwolz]

@jcesarmobile I am relatively sure that this should also be fixed by #7518. The example by @alex-mironov did not set a boundary and currently a fallback for this is missing (see: https://github.com/ionic-team/capacitor/pull/7518/files#diff-8f913b48ce428d2f82c671b3331c5b9efacd6babec8c719dea09dbf17c28c79dR233). However, I think Android automatically did set a fallback already.

@alex-mironov you could try manually adding a boundary to your call which should be a workaround for the moment:

const response = await axios.post('/api/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data; boundary="foo"',
    }
 });

[alex-mironov]

Any suggestions on how to approach fixing this issue?

[grzegorzCieslik95]

The same, any idea how to fix this?