Android version Sometimes [TypeError: Network request failed] appears when uploading pictures using FormData

[zgj0303]

Description

Android version Sometimes [TypeError: Network request failed] appears when uploading pictures using FormData

Version

0.65.1

Output of npx react-native info

System:
OS: Windows 10 10.0.22000
CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz
Memory: 4.31 GB / 15.80 GB
Binaries:
Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2
System Images: android-29 | Intel x86 Atom_64
Android NDK: Not Found
Windows SDK: Not Found
IDEs:
Android Studio: Version 4.2.0.0 AI-202.7660.26.42.7351085
Visual Studio: Not Found
Languages:
Java: 1.8.0_131 - C:\Program Files\Java\jdk1.8.0_131\bin\javac.EXE
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
react-native-windows: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

function updaeTXimg(res) {

let formData = new FormData();

for (let i = 0; i < res.assets.length; i++) {
  let file = { uri: res.assets[i].uri, type: res.assets[i].type, name: 'image.jpeg' };   //这里的key(uri和type和name)不能改变,
  formData.append("mfiles", file);   //这里的files就是后台需要的key
}

fetch(dataurl + '/file/contflie',
  {
    method: "post",
    body: formData
  }).then(res => res.json()).then(data => {
    console.log( data)
    props.getimg(data)

  }).catch(error => {
    console.log(error)

  })

}

Snack, code example, screenshot, or link to a repository

No response

[Marcoo09]

I had this problem and I fixed specifying android:usesCleartextTraffic="true" on AndroidManifest.
I think this issue is repeated #33217 #25244 #32879 so maybe some of the comments there help you

[naderalfakesh]

I had this problem too react-native: 0.67.3
I tried :
android:usesCleartextTraffic="true"
removing Flipper related line and a lot more nothing worked, then I noticed that any picture fails the first time and succeeds the next time.

So I had to do this ugly workaround.

// A workaround for android to retry upload in case of failure (retries count 1)
async function retry(
  fn: () => Promise<AxiosResponse<FileUploadResource, File>>,
) {
  try {
    return await fn();
  } catch {
    return fn();
  }
}

Note: If you are using Axios any version above 0.24.0 also has a problem with formData

[font-ds]

I solve this problem by using rn-fetch-blob.

[flyskywhy]

fixed TypeError: Network request failed when upload file to http not https with Android debug builds

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.