React Native Fetch/ Axios file upload error

Question

I am facing an issue while trying to upload an image to the server from React-Native android emulator, please point me to an answer or write an answer if you faced this issue and resolved it.

const data = new FormData();
  data.append('file', {
    uri: file.src.uri,
    name: file.src.name,
    type: file.src.type,
  });
  data.append('documentType', file.id);
   // axios({
  //   method: 'post',
  //   url: API_URL + '/users/' + user.id + '/uploadDocument',
  //   body: data,
  //   headers: {
  //     'Content-Type': 'multipart/form-data; ',
  //   },
  // })
  fetch(API_URL + '/users/' + user.id + '/uploadDocument', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'multipart/form-data',
    },
    body: data,
  })
    .then(async (res) => {
      console.log(res);
      if (res.status === 200) {
        Toast.show({
          text: 'Profile Document Uploaded Successfully',
          position: 'top',
        });
      } else {
        Toast.show({
          text: 'There was an error uploading',
          position: 'top',
        });
      }
    })
    .catch((err) => {
      console.log('Profile img upload err', err.message);
      Toast.show({
        text: 'Unable to upload profile document',
        position: 'top',
      });
    });

Here is the response for Fetch-

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "85366f42-0bb9-48e0-81f6-fb516a41efb3", "offset": 0, "size": 244}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "85366f42-0bb9-48e0-81f6-fb516a41efb3", "offset": 0, "size": 244}}, "bodyUsed": false, "headers": {"map": {"access-control-allow-headers": "x-requested-with, authorization,Content-Type", "access-control-allow-methods": "POST, GET, OPTIONS, DELETE, PUT", "access-control-allow-origin": "*", "access-control-max-age": "3600", "cache-control": "no-cache, no-store, max-age=0, must-revalidate", "content-type": "application/json;charset=UTF-8", "date": "Wed, 17 Feb 2021 12:34:59 GMT", "expires": "0", "pragma": "no-cache", "server": "nginx/1.12.1", "x-content-type-options": "nosniff", "x-frame-options": "DENY", "x-xss-protection": "1; mode=block"}}, "ok": false, "status": 400, "statusText": undefined, "type": "default", "url": "https://xxxxxx.yyyyyy.in/users/422/uploadDocument"}

Axios fails with 400 or 500 error code

Hernán Pentimalli Hernán Pentimalli · Accepted Answer · 2021-02-17T13:18:56

I believe it would be hard to tell what the error is without some more info from the server. A 400 Bad Request error indicates there is a problem with the payload you are sending. Probably the file mime type or the content itself.

The 500 Internal Error response probably indicates something you are sending is causing an exception server-side (mainly because the server was poorly coded to handle incorrect payloads).

React Native Fetch/ Axios file upload error

1 Answers