React Native Axios upload image return Network Error on Android
I tried to upload some data including an image to server using Axios
.
It's working perfectly on iOS, but on Android, it returned Network Error
const data = new FormData();
data.append('tag', tag.METHOD_TAG_UPLOAD_PHOTO);
data.append('app_version', 1);
data.append('os_type', tag.OS_TYPE);
data.append('store_code', kodetoko);
data.append('photo', {
uri: image_picked.uri,
type: 'image/jpeg',
name: judul + ".jpg"
});
I tried to search for solution elsewhere, they said that the problem is within the type
of the photo
's object, it needs to use image/jpeg
type. I'm using it but it still return Network Error
. Please help.
Solution 1:
-
Open this dir 'android/app/src/debug/java/com/flatApp/ReactNativeFlipper.java'
-
Comment the line as per below code:
NetworkingModule.setCustomClientBuilder( new NetworkingModule.CustomClientBuilder() { @Override public void apply(OkHttpClient.Builder builder) { // builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin)); } });
Solution 2:
I had the same issue and accepted answer didn't work for me. Below is what helped me.
-
In android/app/src/main/java/com/{yourProject}/MainApplication.java comment the below line :
initializeFlipper(this, getReactNativeHost().getReactInstanceManager())
-
In android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java comment 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); });