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

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

}); `

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 35

Most upvoted comments

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'
})

+53

cesar3030 on Aug 5, 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! ❤️

+36

maitrungduc1410 on Jul 10, 2019

Just tried and it is still giving same error - " Error: Network Error".

In the console log i am getting this:

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:567)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:397)
    at XMLHttpRequest.js:503
    at RCTDeviceEventEmitter.emit (EventEmitter.js:179)
    at MessageQueue.__callFunction (MessageQueue.js:351)
    at MessageQueue.js:116
    at MessageQueue.__guardSafe (MessageQueue.js:314)

+18

vishal2947 on May 28, 2018

Thanks @cesar3030.

Was a mime type problem.

sephh on Oct 16, 2019

type: 'image/jpeg' solved this issue for Andriod

swayok on Sep 1, 2019

We’ve gotten around this by keeping the 'Content-Type':'application/x-www-form-urlencoded' headers, but using a string in the formdata format, instead of FormData, like:

const body = { some: 'data', bla: 'asdf' };
// key=value&otherkey=value is what FormData produces
const data = Object.entries(params)
  .map((pair) => `${pair[0]}=${pair[1]}`)
  .join('&');
axios({
    url:'https://api.cloudinary.com/v1_1/abcde/upload',
    method:'POST',
    headers:{
      'Content-Type':'application/x-www-form-urlencoded'
    },
    data,
}).then(function(response){

evan-007 on Aug 1, 2018

axios in react native uses the nodejs implementation as an adapter and it’s working fine in both android and ios but in android I don’t know why you should add the correct image/file type to your form data or it will raise “Network Error” try this formData.append('file', {...photo,type:"image/jpeg"}); or png

digital-flowers on Dec 19, 2018

any update on this? or at least a workaround?

shushuy on Aug 14, 2018

Issue is persistent on react native, issue should be re-opened, none of the above solutions work. I think we need more mature approach in debugging, where can I see exact issue because of which my request is never sent out to server? On emulator i saw something like bad file descriptor, but I usually use real device, that doesn’t show such issue when i inspect err.request

ziaulrehman40 on May 18, 2020

@vishal2947 I’m stuck at the same step too, could you explain what you have changed with axios to get it to upload the file if it’s not too much to ask? Thank you.

Babazon on Jun 15, 2018

I have already checked out this link but none of the answers seems to work 😐

vishal2947 on May 28, 2018