CODEWITHSUNDEEP
androidreact-nativefetch
shatyajeet
shatyajeet

Reputation: 311

File upload in React Native through fetch, XHR and axios fails on Android but works on iOS

I have looked at every possible solution to this on stack overflow, Github issues, gists and what not. None of them have worked.

Basically I am trying to upload an image captured through react-native-camera onto a Java API and it works on iOS both on the simulator and on a physical device.

function handleOnPictureTaken (image) {
  const imageName = image.uri.split('/').pop()
  const imageExtension = imageName.split('.').pop()
  const imageType = `image/${imageExtension}`
  const source = { uri: image.uri, type: imageType, name: imageName }
  onPhotoSelected(source)
}

function onPhotoSelected (image) {    
  const photoData = new FormData()
  image = {
    ...image,
    uri: image.uri.replace('file://', '')
  }
  photoData.append('file', image)
  uploadFile(photoData)
}

function uploadFile(image) {
  const config = {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data'
    },
    credentials: 'include'
  }
  if (method === 'POST' || method === 'PUT') {
    if (config.headers['Content-Type'] === 'application/json') {
      config.body = JSON.stringify(data)
    } else {
      config.body = data
    }
  }

  return fetch(url, config).then(checkJSON)
    .then(res => res.text())
    .then(parseJSON)
    .catch(rejectRequest)
}

This works perfectly on iOS. But on Android, I keep getting Network request failed as shown below

Stack trace: TypeError: Network request failed
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:28469:31)
at call (native)
at dispatchEvent (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:34597:31)
at setReadyState (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33681:33)
at __didCompleteResponse (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33508:29)
at apply (native)
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:33618:52)
at apply (native)
at emit (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:6202:42)
at apply (native)
at __callFunction (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5626:49)
at anonymous (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5348:31)
at __guard (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5580:15)
at callFunctionReturnFlushedQueue (http://192.168.0.103:8081/index.bundle?platform=android&dev=true&minify=false:5347:21)

I have been struggling to get this work. The physical Android device is on the same WiFi. Normal POST requests are working. But only uploading files are failing.

If anyone has any suggestions, do let me know.

Upvotes: 1

Views: 2504

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12195

Do check inside the AndroidManifest.xml for the main file,

 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="true"
      android:usesCleartextTraffic="true"
      android:theme="@style/AppTheme">

Does it include this text android:usesCleartextTraffic="true"

And just reember to make a new apk, and then check on that,

UPDAT:

Whoever is still struggling with this issue. it's happening because of Flipper network plugin. I disabled it and things work just fine.

My workaround to make this work is commenting out line number 43

38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);

in this file android/app/src/debug/java/com/maxyride/app/drivers/ReactNativeFlipper.java

First make a cleanbuild, 1.Bundle your app 2.CLea folder by cd android and then ./gradlew clean 3.Make debug apk by ./gradlew assembleDebug

Justcheck Github, found this, please check.

UPDATE2:

LINK link-rn

Hope it helps. feel free for doubts

Upvotes: 3

Related Questions