How to upload image with axios using form data in react-native

Question

I am trying to upload an image after an image capture in react native using axios and formData. I am using the react-native-camera package to capture the image.

I have checked the other similar answers but none of them are working.

These are the two methods that I tried but it's not working. I am getting Error: Network Error in the below method.

  let bodyFormData = new FormData();
  bodyFormData.append(`q_image_${serial}`, {
    uri: 'file:///data/user/0/com.student/cache/Camera/b6217266-35d5-4a0c-b09e-0c9f12777194.jpg', 
    type: 'image/jpeg',
    name: 'someName',
  });
  
  const { data } = await axios({
    method: 'post',
    url: `${baseURL}/service.php`,
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
    data: bodyFormData
  });

  console.log('UPLOAD', data);

I am getting Images not uploaded response from the server with the below method.

  let bodyFormData = new FormData();
  bodyFormData.append(`q_image_${serial}`, 'file:///data/user/0/com.student/cache/Camera/b6217266-35d5-4a0c-b09e-0c9f12777194.jpg');
  
  const { data } = await axios({
    method: 'post',
    url: `${baseURL}/service.php`,
    headers: {
      'Content-Type': 'multipart/form-data' 
    },
    data: bodyFormData
  });

  console.log('UPLOAD', data);

The server is working fine. I am able to upload an image using postman.

Is this an issue of react-native-camera or formData or axios?

Edit: I found it. I am using react-native version 0.62.* and this is an open issue on github.

Ciao, you checked that bodyFormData contains only the photo you want to send to server? Another question: error you got it's just Error: Network Error? No other infos available? — Giovanni Esposito
If this is still making a problem in postman then maybe your are sending params in a wrong way or a server issue. — Waheed Akhtar
@WaheedAkhtar No in postman it's working fine. As you can see in the image I have attached. — DragonBorn
@GiovanniEsposito Ciao, yea the bodyFormData contains the image and two other params and I am sending those correctly. Attached full network error image in the question. — DragonBorn
Suspiciously similar to stackoverflow.com/questions/59359834; does that help? — Andy Taton

DragonBorn DragonBorn · Accepted Answer · 2020-08-09T06:16:54

I have found the issue and currently this is an open issue of react-native. If anyone is facing the same and is on RN version 0.62.* then please follow the steps.

In gradle.properties change Flipper Version to 0.52.0
```
FLIPPER_VERSION=0.52.0
```

For some reason I got a multi-dex error after this and if you are facing the same then:

In app/build.gradle add

implementation 'com.android.support:multidex:1.0.3'

Add multiDexEnabled true in defaultConfig in app/build.gradle.

defaultConfig {
   applicationId "com.packageName"
   minSdkVersion rootProject.ext.minSdkVersion
   targetSdkVersion rootProject.ext.targetSdkVersion
   versionCode 1
   versionName "1.0"
   multiDexEnabled true
}

How to upload image with axios using form data in react-native

1 Answers