Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

felipeavila-vp · 2024-05-23T14:02:02Z

Description

When I try to send some post request sending a file with formData I receive a Network Error. Most of the time the request works fine, but sometimes I receive this error. The problem occurs when use Android, works fine with IOS.

Recently I updated my application to react-native 0.74.1(latest), before the version was 0.64.4. In older version all works fine.

Current versions:

React native: 0.74.1
Node: >= 18
React: 18.2.0

Steps to reproduce

Only try to submit some files using formData

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Output of `npx react-native info`

System:
  OS: macOS 14.4
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 29.93 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 8.19.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-29 | Google APIs Intel x86 Atom
      - android-29 | Google Play Intel x86 Atom
      - android-30 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-VanillaIceCream | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: ^0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No have logs to show

Reproducer

https://github.com

Screenshots and Videos

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2024-05-23T14:02:17Z

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

H3tansh · 2024-05-31T07:12:17Z

This issue still in

const formData = new FormData()
formData.append('audio_file', {
name: fileName,
type: 'audio/mp3',
uri: filePath
})

    await fetch('http endpoint', {
        body: formData,
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
            Authorization:
                'Bearer token'
        }
    })
        .then(res => {
            console.log('test result ', res)
            console.log('test result status ', res.status)
        })
        .catch(e => {
            console.log('test e ', e)
        })

This returns network error

REACT-NATIVE-INFO output:-

System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1
Memory: 599.88 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.19.0
path: ~/.nvm/versions/node/v18.19.0/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.2.3
path: ~/.nvm/versions/node/v18.19.0/bin/npm
Watchman:
version: 2024.04.15.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK:
API Levels:
- "27"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
- "34"
Build Tools:
- 27.0.3
- 28.0.3
- 29.0.2
- 29.0.3
- 30.0.2
- 30.0.3
- 31.0.0
- 32.0.0
- 32.1.0
- 33.0.0
- 33.0.0
- 33.0.1
- 34.0.0
System Images:
- android-32 | Google APIs ARM 64 v8a
- android-33 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2023.1 AI-231.9392.1.2311.11330709
Xcode:
version: 15.0/15A240d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.2
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.74.1
wanted: 0.74.1
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

saadkhan2211 · 2024-06-06T08:11:30Z

Same issue here..

const fileExtension = coverImage.split(".").pop();

  // Create a new FormData instance
  const formData = new FormData();

  formData.append("image", {
    uri: coverImage,
    name: "image-" + new Date() + `.${fileExtension}`,
    type: `image/${fileExtension}`,
  } as any);

  // Append other form fields to FormData
  formData.append("food_name", data.food_name);
  formData.append("description", data.description);
  formData.append("price", String(data.price));
  formData.append("category", data.category);
  formData.append("addOn", JSON.stringify(data.addon));

  // Append sizes if applicable
  if (isSize && data.size.length > 0) {
    data.size.forEach((input, index) => {
      formData.append(`size[${index}]`, input.size);
      formData.append(`size_price[${index}]`, String(input.price));
    });
  }

  const response = await axios.post(
    `${app_url}/addMenuItem/${resId}`,
    formData,
    {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }
  );

When I console.log req.file and req.body,

undefined [Object: null prototype] {
food_name: '',
description: '',
price: 'null',
category: '',
addOn: '{"addon":"","price":0}'
}

Here I'm not sending any data in req.body only sending file to req.file which I get undefined..
This works fine with react native 0.73.x but not with 0.74.x

github-actions · 2024-07-01T05:01:00Z

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

felipeavila-vp · 2024-07-05T12:45:44Z

Same problem here yet

huzhanbo1996 · 2024-07-11T12:12:51Z

@saadkhan2211 @felipeavila-vp @H3tansh Hi, could you provide Missing Reproducible Example as above, so I can help you solve this problem?

H3tansh · 2024-07-12T04:38:00Z

@huzhanbo1996 below is my working code, It only works if I use deployed HTTPS API URL , but do not work if I use HTTP endpoint running on my localhost.

 const formData = new FormData() 

    formData.append('file', {
        uri: path,
        name: fileName, // 'sound.mp3'
        type: fileType // 'audio/mp3'
    })

const response = await fetch(
    'https://dummy.url.com/api,
    {
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
            Authorization: `Bearer ${TOKEN}`
        },
        body: formData
    }
)

P.S:- Issue only persist in android.

here is the issue I've created
#44737

raphpay · 2024-10-24T12:12:41Z

Same here, but with windows.
It appears to be a problem only with multipart/form-data.
I got the same code running on all platforms, but windows is the only one causing trouble, and only with this method :

static async postFormData<T>(
    endpoint: string,
    data: any = {},
    token?: string,
  ): Promise<T> {
    try {
      const url = `${API_BASE_URL}/${endpoint}`;

      const headers: Record<string, string> = {
        'Content-Type': 'multipart/form-data',
      };

      // Include token in headers if provided
      if (token) {
        headers['Authorization'] = `Bearer ${token}`;
      }

      const response = await fetch(url, {
        method: HttpMethod.POST,
        headers,
        body: data,
      });

      if (!response.ok) {
        let errorMessage = `HTTP error! Status: ${response.status}`;
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
          const responseData = await response.json();
          if (responseData && responseData.reason) {
            errorMessage = responseData.reason;
          }
        }
        throw new Error(errorMessage);
      }

      return (await response.json()) as T;
    } catch (error) {
      throw error;
    }
  }

saadkhan2211 · 2024-10-24T12:28:05Z

Hi Everyone, Mine got fixed after some troubleshooting...All I did was that I removed Content-Type part from headers and It worked

jocoders · 2024-11-05T10:07:42Z

I had the same problem after upgrade React Native to 0.72.17. And in my case renamed from Content-Type => content-Type fixed the error.

sssajjad007 · 2024-11-17T17:42:49Z

same issue,

GalMarkelj · 2024-11-28T12:21:59Z

Same issue.

adriano461997 · 2024-12-07T23:01:56Z

Same issue

falmudayfir · 2024-12-12T09:52:37Z

Same issue, its only happening in android, iOS is fine.

Tiepbm · 2024-12-19T08:58:52Z

i have same issue

felipeavila-vp · 2024-12-19T18:01:15Z

I had the same problem after upgrade React Native to 0.72.17. And in my case renamed from Content-Type => content-Type fixed the error.

not work for me =(

felipeavila-vp · 2024-12-19T18:01:52Z

Hi Everyone, Mine got fixed after some troubleshooting...All I did was that I removed Content-Type part from headers and It worked

not work here =(

adriano461997 · 2024-12-19T23:15:12Z

In my case it was the timeout. I defined the timeout to 3000 and takes more than that to upload file. So I just increased the timeout or even can remove if you don't need to control the timeout.

simeon-kirov · 2024-12-24T15:43:55Z

The problem is buried down into com.facebook.react.modules.network.NetworkingModule.constructMultipartBody(...) method. It expects to find Content-type header in the FormData part, containing the URI to the file. Something like this:

const part = {
    headers: [ ['content-type', 'image/png'] ],
    uri: 'file:///...',
    name: fileName,
    mimeType: 'image/png'
}

If there is no Content-type header, even though mimeType for the part is provided, the method returns null (line 725 in version 0.76.5) which causes the entire request to go silently into the trash, causing this nice and informative "Network error"

Even better - if you explicitly specify headers property in your FormData part it will not help you, because somewhere in the transit between the layers, the headers are overwritten mercilessly with content-disposition header. Thus, no matter what you provide in your request, only the content-disposition header reaches the NetworkingModule.

I was able to workaround the problem by registering custom RequestBodyHandler with the NetworkingModule and re-routing the processing of "form-data" payload to it, but it was ugly.

bestchenyan · 2024-12-25T14:33:39Z

I was able to workaround the problem by registering custom RequestBodyHandler with the NetworkingModule and re-routing the processing of "form-data" payload to it, but it was ugly.

@simeon-kirov Hi, I think I have encountered the same problem as you. When I use HTTPS to send formData, it always returns 403, and the request does not reach Nginx. Can you share your solution steps?

simeon-kirov · 2024-12-26T13:32:40Z

Hi @bestchenyan,

You can find example workaround implementation here: https://github.com/simeon-kirov/expo-debug/tree/main.
I tried to describe what's done in the README and inline JavaDoc.

However, you're saying in your case it always returns HTTP error 403. This is different from what I observe. In my case I'm getting just "Network error" message without any HTTP code. Probably your problem is related to self-signed/untrusted SSL certificates on the server. Make sure that you've registerd your server certificates as trusted. Check this documentation: https://developer.android.com/privacy-and-security/security-config. Also, you can see the configuration in my project:

android/app/src/debug/AndroidManifest.xml
android/app/src/debug/res/xml/network_security_config.xml
android/app/src/debug/res/raw/trusted_certificates

zhenyiplusone · 2024-12-27T09:45:33Z

Same issue

fadi-quader-mox · 2024-12-31T03:45:02Z

I managed to fix it on Android by just setting 'Content-Type': 'multipart/form-data' in headers. it seems this is not required on iOS.

 axios.post('http://your-server.com/upload', formData, {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
 })

zwenza · 2025-01-24T14:47:46Z

Having the same problem, only on Android as well. Using Axios worked

mandeepBartwal1079 · 2025-01-27T11:15:39Z

@zwenza Could you share your code?

felipeavila-vp · 2025-01-27T11:20:39Z

Having the same problem, only on Android as well. Using Axios worked

Here not work using axios or fetch. =(

felipeavila-vp · 2025-01-27T11:21:29Z

I managed to fix it on Android by just setting 'Content-Type': 'multipart/form-data' in headers. it seems this is not required on iOS.

axios.post('http://your-server.com/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})

Hello friend!
I tryied this, but the same problem occurs

mandeepBartwal1079 · 2025-01-27T11:27:20Z

async function handleSubmit() {
try {
const formData = new FormData();
console.log('Submit button pressed');

  formData.append('inventoryOrderItems.OrderId', order.orderId.toString());

  productList.forEach((product, index) => {
    const baseKey = `inventoryOrderItems.OrderItemDatas[${index}]`;
    formData.append(`${baseKey}.Id`, product.id.toString());
    formData.append(`${baseKey}.ProductId`, product.productId.toString());
    formData.append(`${baseKey}.RecievingQty`, (inputValues[product.productCode] || 0).toString());

    const images = imagesByProductCode[product.productCode] || [];
    images.forEach((imageUri: string) => {
      if (!imageUri.startsWith('file://')) {
        throw new Error(`Invalid image URI: ${imageUri}`);
      }

      const fileName = imageUri.split('/').pop() || 'unknown.jpg';
      const fileType = `image/${fileName.split('.').pop()}`; // Example: 'image/jpeg'

      // Append file object to FormData
      formData.append(`${baseKey}.files`, {
        uri: imageUri,
        name: fileName,
        type: fileType,
      } as any); // Cast as any to bypass TypeScript errors if any
    });
  });

  // Debug FormData (for React Native)
  for (const pair of (formData as any)._parts) {
    console.log(pair[0], pair[1]);
  }

  const response = await axios.post(`MYAPIURL`, formData, {
    headers: {
      accept: 'application/json',
      'content-type': 'multipart/form-data',
    },
    maxBodyLength: Infinity,
  });

  if (response.data.success) {
    const _routeId: string | number = order?.orderRouteId;
    console.log('Data submitted successfully:', response.data);
    Alert.alert('Order details submitted successfully!');
    navigation.navigate('ORDERSDETAIL', {_routeId});
  } else {
    console.log('Submission failed:', response.data);
    Alert.alert('Submission failed.');
  }
} catch (error: any) {
  console.error('Error:', error.message);

  if (error.response) {
    console.error('Error response data:', error.response.data);
    Alert.alert(error.response.data.message || 'Unable to submit data.');
  } else {
    Alert.alert('Network error. Please try again.');
  }
}

}

This is my code; sometimes it works, and sometimes it doesn't. Can someone please help?

angus6b23 · 2025-02-06T18:34:46Z

same issue. Please advice if there is any other ways to POST or PUT form data or file properly with current react native version

ganeshmohane · 2025-02-09T09:34:01Z

same issue, any found solution?

standardwish · 2025-02-25T17:06:32Z

same issue in android

ganeshmohane · 2025-02-26T09:32:31Z

I am working on two projects both are in react native in one project formData works perfectly in other gives error after few successful transfer, I am unable to understand why this behaviour

felipeavila-vp added the Needs: Triage 🔍 label May 23, 2024

github-actions bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels May 23, 2024

github-actions bot added Platform: Android Android applications. Platform: iOS iOS applications. 🌐Networking Related to a networking API. labels May 23, 2024

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 1, 2024

github-actions bot added Needs: Attention Issues where the author has responded to feedback. and removed Needs: Author Feedback Stale There has been a lack of activity on this issue and it may be closed soon. labels Jul 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

felipeavila-vp commented May 23, 2024

github-actions bot commented May 23, 2024

H3tansh commented May 31, 2024

saadkhan2211 commented Jun 6, 2024

github-actions bot commented Jul 1, 2024

felipeavila-vp commented Jul 5, 2024

huzhanbo1996 commented Jul 11, 2024

H3tansh commented Jul 12, 2024 •

edited

Loading

raphpay commented Oct 24, 2024 •

edited

Loading

saadkhan2211 commented Oct 24, 2024

jocoders commented Nov 5, 2024 •

edited

Loading

sssajjad007 commented Nov 17, 2024

GalMarkelj commented Nov 28, 2024

adriano461997 commented Dec 7, 2024

falmudayfir commented Dec 12, 2024

Tiepbm commented Dec 19, 2024

felipeavila-vp commented Dec 19, 2024

felipeavila-vp commented Dec 19, 2024

adriano461997 commented Dec 19, 2024

simeon-kirov commented Dec 24, 2024

bestchenyan commented Dec 25, 2024

simeon-kirov commented Dec 26, 2024 •

edited

Loading

zhenyiplusone commented Dec 27, 2024

fadi-quader-mox commented Dec 31, 2024

zwenza commented Jan 24, 2025

mandeepBartwal1079 commented Jan 27, 2025 •

edited

Loading

felipeavila-vp commented Jan 27, 2025

felipeavila-vp commented Jan 27, 2025

mandeepBartwal1079 commented Jan 27, 2025

angus6b23 commented Feb 6, 2025

ganeshmohane commented Feb 9, 2025

standardwish commented Feb 25, 2025

ganeshmohane commented Feb 26, 2025

Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

Comments

felipeavila-vp commented May 23, 2024

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

github-actions bot commented May 23, 2024

H3tansh commented May 31, 2024

saadkhan2211 commented Jun 6, 2024

github-actions bot commented Jul 1, 2024

felipeavila-vp commented Jul 5, 2024

huzhanbo1996 commented Jul 11, 2024

H3tansh commented Jul 12, 2024 • edited Loading

raphpay commented Oct 24, 2024 • edited Loading

saadkhan2211 commented Oct 24, 2024

jocoders commented Nov 5, 2024 • edited Loading

sssajjad007 commented Nov 17, 2024

GalMarkelj commented Nov 28, 2024

adriano461997 commented Dec 7, 2024

falmudayfir commented Dec 12, 2024

Tiepbm commented Dec 19, 2024

felipeavila-vp commented Dec 19, 2024

felipeavila-vp commented Dec 19, 2024

adriano461997 commented Dec 19, 2024

simeon-kirov commented Dec 24, 2024

bestchenyan commented Dec 25, 2024

simeon-kirov commented Dec 26, 2024 • edited Loading

zhenyiplusone commented Dec 27, 2024

fadi-quader-mox commented Dec 31, 2024

zwenza commented Jan 24, 2025

mandeepBartwal1079 commented Jan 27, 2025 • edited Loading

felipeavila-vp commented Jan 27, 2025

felipeavila-vp commented Jan 27, 2025

mandeepBartwal1079 commented Jan 27, 2025

angus6b23 commented Feb 6, 2025

ganeshmohane commented Feb 9, 2025

standardwish commented Feb 25, 2025

ganeshmohane commented Feb 26, 2025

Output of `npx react-native info`

H3tansh commented Jul 12, 2024 •

edited

Loading

raphpay commented Oct 24, 2024 •

edited

Loading

jocoders commented Nov 5, 2024 •

edited

Loading

simeon-kirov commented Dec 26, 2024 •

edited

Loading

mandeepBartwal1079 commented Jan 27, 2025 •

edited

Loading