Unable to send formData in axios (react-native android)

See original GitHub issue

I am making a POST request to “Cloudinary” server to upload an image and sending formdata using axios in react-native. The whole process is working fine on iOS but on android i am getting “Network Error”.

I am using axios 0.18.0 and stuck on this from last 3 days. Someone please help me.

This issue has been faced by many people but there is no solution so far.

My code:

` var photo = { uri: image.sourceURL, type: image.mime, name: image.filename, };

var formData = new FormData();
formData.append('file',photo);
formData.append('upload_preset','abcde');

axios({
    url:'https://api.cloudinary.com/v1_1/abcde/upload',
    method:'POST',
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    },
    data:formData
}).then(function(response){

}).catch((error) =>{
   //Network error comes in

}); `

Issue Analytics

State:
Created 5 years ago
Comments:35

Top GitHub Comments

53reactions

cesar3030commented, Aug 5, 2019

I had the same issue, Adding type: 'image/jpeg', to the file attribute of the formData fixed it.

const formData = new FormData();
    formData.append('file', {
      uri: pictureUri,
      type: 'image/jpeg',
      name: 'profile-picture'
})

36reactions

maitrungduc1410commented, Jul 10, 2019

For those who’s struggling in this issue:
After finding a ton of solutions on internet I was still stuck in this problem, some people say it’s about the network problem (android prevent HTTPS,…), some others say we need to add multipart/form-data in header along with the request sent to server. I tried all but didn’t work

The thing is when I put the file inside formData it breaks, if I comment it and just send for example a number, it’s fine.

THE SOLUTION is: on Android you need to specify the file path with file:// as prefix. So do like this:

          const audio = {
            uri: 'file://' + this.recorder.fsPath,
            type: 'video/mp4',
            name: filename
          }

God bless you! ❤️

Top Results From Across the Web

Why does 'formData' not work in 'axios 0.26.1' in react native ...

0 but I get this error when sending formData in Android emulator. Error: Network Error. formData: enter image description here export const ...

Steps to Send Form Data Using Axios Post Request in React

Here is the step-by-step guide to send form data using axios post request in React. Refer this article if you need this step-by-step...

Why does 'formData' not work in 'axios 0.26.1' in react native ...

[Solved]-Why does 'formData' not work in 'axios 0.26.1' in react native Android emulator?-React Native. Search. score:1. axios.post(url, formData, ...

axios Unable to send formData in axios (react-native android)

Tag: axios Unable to send formData in axios (react-native android) ; Categories. CMS Tool · Default · Ionic Framework (12); Magento (11); React ......

FormData not working after expo update to sdk 45. How do I ...

I'm sending the profile picture through the method yield call and I get axios netwrok error. If I don't use FormData it works....