I have upgraded react-native to 0.62 and i got the problem of Network error for Android only, iOS works fine.
I use FormData object to populate data formated as
const data = new FormData();
// On Android i add file protocol to file path - file://...
data.append('photos', {
uri: 'file:///data/.../my-image.jpeg',
type: 'image/jpeg',
name: 'my-image.jpeg'
});
and other textual data
data.append('description', 'my long description...');
Does anyone have the problem?
I have tried multiple Android SDKs 27, 28, 29, and got same problem on all :(
The things is if i do not upload images, but only textual data request works just fine :(
Any suggestion wele :)?
I have upgraded react-native to 0.62 and i got the problem of Network error for Android only, iOS works fine.
I use FormData object to populate data formated as
const data = new FormData();
// On Android i add file protocol to file path - file://...
data.append('photos', {
uri: 'file:///data/.../my-image.jpeg',
type: 'image/jpeg',
name: 'my-image.jpeg'
});
and other textual data
data.append('description', 'my long description...');
Does anyone have the problem?
I have tried multiple Android SDKs 27, 28, 29, and got same problem on all :(
The things is if i do not upload images, but only textual data request works just fine :(
Any suggestion wele :)?
Share Improve this question asked Mar 29, 2020 at 18:01 Kristijan TomicKristijan Tomic 411 gold badge3 silver badges9 bronze badges 1- I am having the same problem...Were you able to resolve the same? – Narendra Singh Commented Jun 10, 2020 at 15:04
4 Answers
Reset to default 3It is happening because of Flipper network plugin.
Comment line number 43 in the file android/app/src/debug/java//<yourappname>/ReactNativeFlipper.java
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 Flipper version 0.39.0 and above this problem was fixed. I've just update Flipper to version 0.40.0 and it working fine.
https://github./facebook/flipper/issues/993#issuement-619823916
Posting this bec I made it work using react-native-ssl-pinning and react-native-image-crop-picker
FormData
file: {
uri: image.path,
type: image.mime,
name: 'image.jpg',
fileName: 'image.jpg',
size: image.size,
},
and the fetch
fetch(url, {
method: 'POST',
sslPinning: { certs: ['cert'] },
body: {
formData: formData,
},
headers: {
Authorization:
'Bearer Token',
Accept: 'application/json; charset=utf-8',
'Content-type': 'multipart/form-data; charset=UTF-8',
},
})
In android/app/src/main/java//{yourProject}/MainApplication.java ment the below line :
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
In android/app/src/debug/java//{yourProject}/ReactNativeFlipper.java ment in line 43 :
builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
Code for image upload :
var formData = new FormData(); formData.append('UserId', '[email protected]'); formData.append('VisitId', '28596'); formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20'); formData.append('EvidenceCategory', 'Before'); formData.append('EvidenceImage', { uri: Platform.OS === 'android' ? `file:///${path}` : `/private${path}`, type: 'image/jpeg', name: 'image.jpg', }); axios({ url: UrlString.BaseUrl + UrlString.imageUpload, method: 'POST', data: formData, headers: { Accept: 'application/json', 'Content-Type': 'multipart/form-data' }, }) .then(function (response) { console.log('*****handle success******'); console.log(response.data); }) .catch(function (response) { console.log('*****handle failure******'); console.log(response); });