Axios XMLHttpRequest - Network error on body exceeding a certain size

Question

I'm trying to POST a file as a base64 string to my API from a react app using axios. Whenever the file seems to exceed a certain (small ~150ko) size, the request is not sent and axios/xhr throws a Network error:

Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)

Any ideas?

Any idea how to solve this?? I am facing this issue right now.. — Ninoop p george, Apr 22 '18 at 07:09
I'm using multipart form data for those uploads (populating a form with my file) https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean — Mathieu K., Apr 24 '18 at 10:23
@Ninooppgeorge and ultimately we moved to uploading directly to our AWS/S3 using a signed uri provided by our backend — Mathieu K., Apr 25 '18 at 16:20

score 0 · Accepted Answer · answered Sep 20 '18 at 10:48

It seems that basic POST requests using axios are capped in there file size. Using multipart form data for those uploads (populating a form with my file) seems to solve the pb

Source

But ultimately we moved to uploading directly to our AWS/S3 using a signed uri provided by our backend.

Rahul Shakya · Answer 2 · 2020-05-04T11:16:41.393

The problem is your type: of your file might not be valid one as per the MIME type. please check in your console

There might also be the problem of repeating the baseURL which means NETWORK_ERROR 404 NOT FOUND like of.. so please see the example below

 let formData = new FormData();
    formData.append("files", {
      uri: payload.uri,
      name: payload.name,
      type: `payload.type?payload.type:image/${fileExt}` //this should be a valid Mime type
    });
      axios.post(`v2/upload_comment_file`, formData, {
        headers: {
          ...(await HeaderData()),
          "Content-Type": "multipart/form-data",
        },
      });

find mime type might get lil tricky for some image and doc picker lib like expo-doc-picker in ver 35.. please try react-native-mime-types https://www.npmjs.com/package/react-native-mime-types which helped me out and can help you too

Axios XMLHttpRequest - Network error on body exceeding a certain size

2 Answers2