Description
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
