react-native 0.63.2 Image upload error [TypeError: Network request failed]

[sureshhallyali]

Description:

When I am trying to post data with fetch() it will post data successfully but if image or any file try to post then it will throw error as shown below
Error : [TypeError: Network request failed]

code:

function openImagePicker() {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
})
.then(image => {
console.log(image.path);
const data = new FormData();
data.append('email', "email");
data.append('file', { uri:image.path, name: 'image.jpg', type: 'image/jpeg/jpg'});

                    let res = fetch(
                                  'http://134.209.144.127/cowsoncloud/admin/cowRegister.php',{
                                  method: 'POST',
                                  body: data,
                                  headers: {
                                              'Accept': "application/json",
                                              'Content-Type': 'multipart/form-data',
                                            },
                              })
                    .then(response => response.json())
                    .then(responseJson => {
                        console.log('upload succes',+responseJson);
                        alert('Upload success!'+JSON.stringify(responseJson));
                    })
                    .catch(error => {
                        console.log('upload error', error);
                        alert('Upload failed!'+error);
                    });

    });

}
Note:

• Using react-native-image-crop-picker package
• in android permission also given such as
  
  android:usesCleartextTraffic="true"
  in this file android/app/src/main/AndroidManifest.xml

React Native version: "react-native": "0.63.2",

Tried this all solution but not working

1 : By giving Permission
uesCleartextTraffic="true" to the AndroidManifest.xml file found inside the dir android/app/src/main/AndroidManifest.xml
for handle http and https

2: Adding comment
// initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
in this file /android/app/src/main/java/com/{your_project}/MainApplication.java
3: Adding comment
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
in his file android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java

4: By upgrading upgrade react native to 63.2 or new version
5: FLIPPER version upgrading to 50.0

Source image

[nhuson269]

My application needs to solve this problem, I have had an issue with iOS since upgrading to version 0.63.x

https://github.com/facebook/react-native/issues/29021

[Mhde96]

am have same issues with react native 0.63

[sjonchhe]

I had the same issue in rn v0.62.2. Solved it by upgrading flipper version to 0.47.0

[andrekovac]

@sjonchhe How do you upgrade the Flipper version for iOS?

Did you update it in ios/Podfile in the line versions['Flipper'] ||= '~> 0.51.0'?

However, updating to 0.51.0 (or 0.47.0) all didn't solve it for me...

(For Android I update FLIPPER_VERSION in gradle.properties)

[dharmendrashah]

i remember this issue, i spent 4 days to google this thing out but nothing works.
will this is a vey common problem in RN 0.62 and later
But this react-native-fetch-blob package is really good try this it will sure help you out.

[andrekovac]

For me it's an issue because the requests of packages I use (i.e. react-native-video and @aws-amplify/auth) fail..
So I can't just switch to another package..

[ignaciosantise]

In my case, the problem was Flipper.
This is how i partially solved the problem in Android:

https://github.com/facebook/react-native/issues/28551#issuecomment-610652110

[cbedoy]

Same error here, iOS app work perfectly but Android is failing on 0.62.2, 0.63.0, 0.61...

2020-08-02 23:41:44.331 22868-22964/com.rndagm8 E/unknown:NetworkingModule: Failed to send url request: http://amazing.url.com
    java.lang.IllegalStateException: Multipart body must have at least one part.
        at okhttp3.MultipartBody$Builder.build(MultipartBody.java:341)

I already disabled Flipper and still failing, oh god! I've expending to much time facing error with iOS releasing and now this thing, what's next?

[safaiyeh]

Duplicate of https://github.com/facebook/react-native/issues/28551

Let me know if the solutions on that issue help resolve this.

[meiqi1992]

same issue+1

[premdasvm]

same issue +1

[sudheepkr]

Iam using "react-native": "0.63.2"

Error gone i did like this way.
1)Added a comment
// builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
file path: android/app/src/debug/java/com/{your_project}/ReactNativeFlipper.java
2) Added code in component
let formData = new FormData();
formData.append('file_name', {uri: fileUri,type:fileType,name:fileName});