React Native network error in POST request when adding a body

Question

it's me again.

I'm learning react native, for now im trying to upload a file, the api is already tested using postman and it does work so I wrote this code:

import * as DocumentPicker from 'expo-document-picker';

async login () {
    let response = await DocumentPicker.getDocumentAsync({type: '*/*'})

    const data = new FormData();
    data.append('file', response)

    // Fetch attempt ----------------------------------------
    fetch("http://192.168.0.3:8000/api/file", {
      method: "POST",
      headers:{  
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: data
    })
    .then(response => response.json())
    .then(response => {
      console.log("upload succes", response);
    })
    .catch(error => {
      console.log("upload error", error, JSON.stringify(error));
    });

    // Axios attempt ----------------------------------------
    axios.post('http://192.168.0.3:8000/api/file', data, { headers:{ "Content-Type": "application/x-www-form-urlencoded"} } )
    .then(res => {
      console.log("goddaamittt wooork", res)
    })
    .catch(error => {
      console.log("error", error, JSON.stringify(error))
    });
  }

When I remove the body and headers from that request it actually returns what the api should return when you try to POST to it without a 'file', some message "{'fileName': 'A file is required'}" but adding it to it I get a network error, the error I get when using fetch it:

upload error [TypeError: Network request failed] {"line":24646,"column":31,"sourceURL":"http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false"}

when it reaches the axios attempt it says something like this:

[Unhandled promise rejection: TypeError: Network request failed]

I tried everything I knew, I need some help!

Idk if it is important but here is what DocumentPicker returns when I pick a file:

Object {
  "name": "FB_IMG_1573232116651.jpg",
  "size": 32482,
  "type": "success",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Fjsonplaceholder-bcb4c1c6-b37d-4634-99a5-3410d9b8654e/DocumentPicker/db8d78dd-2587-40e4-aed9-656c36df29f4.jpg",
}

This is the error I get when I remove the body from the axios request

error [Error: Request failed with status code 400] {"config":{"transformRequest":{},"transformResponse":{},"headers":{"Accept":"application/json, text/plain, /"},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"method":"post","url":"http://192.168.0.3:8000/api/file"},"response":{"data":{"message":"File is required"},"status":400,"headers":{"map":{"cache-control":"public, max-age=0","x-robots-tag":"noindex","x-debug-token-link":"http://192.168.0.3:8000/_profiler/54e68c","x-debug-token":"54e68c","link":"http://192.168.0.3:8000/api/docs.jsonld; rel=\"http://www.w3.org/ns/hydra/core#apiDocumentation\"","content-type":"application/json","x-powered-by":"PHP/7.2.4","connection":"close","date":"Fri, 08 Nov 2019 17:54:12 GMT","host":"192.168.0.3:8000"}},"config":{"transformRequest":{},"transformResponse":{},"headers":{"Accept":"application/json, text/plain, /"},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"method":"post","url":"http://192.168.0.3:8000/api/file"},"request":{"url":"http://192.168.0.3:8000/api/file","credentials":"omit","headers":{"map":{"accept":"application/json, text/plain, /"}},"method":"POST","mode":null,"referrer":null,"_bodyText":""}},"line":178773,"column":26,"sourceURL":"http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?platform=android&dev=true&minify=false&hot=false"}

H3lltronik · Accepted Answer · 2019-11-08 19:04:19Z

1

It was such a dump solution, it took me hours to find this:

When I get the file from DocumentPicker I had to add the type of the file because DocumentPicker return an odd type called "success", when I changed it to 'image/jpeg' it worked :D its not a solution at all because I will need to find a way to know what type of file is each file a user chooses, anyways, this code works c:

let response = await DocumentPicker.getDocumentAsync({type: 'image/jpeg'})
    response.type = 'image/jpeg' // <- lasdfkasdfaslfkfsdkdsaf

    const data = new FormData();
    data.append('file', response);

    axios.post('http://192.168.0.3:8000/api/file', data , {headers: { 'Content-type': 'application/x-www-form-urlencoded' }} )
    .then(res => {
      console.log("gooosh", res.data)
    })
    .catch(error => {
      console.log("error", error, JSON.stringify(error))
    });

answered Nov 8, 2019 at 19:04

H3lltronik

8961 gold badge11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lenoarod Over a year ago

the type means the pick wether get successfully, not file type

j10 Over a year ago

H3lltronik : How did you determine MIME type for DocumentPicker ?

Lenoarod · Accepted Answer · 2019-11-08 17:56:53Z

0

you should try to modify the content-type to

fetch("http://192.168.0.3:8000/api/file", {
      method: "POST",
      headers:{  
        'Content-Type': 'multipart/form-data',
      },
      body: data
    })

and for the form-url-urlencoded, the fetch is not supported. you have to push it by yourself.you can see this answer.

answered Nov 8, 2019 at 17:56

Lenoarod

3,63116 silver badges25 bronze badges

1 Comment

H3lltronik Over a year ago

I keep getting the same error, when removing headers and body it actually do the request, when I add them it keep failing, no matter what :c

Collectives™ on Stack Overflow

React Native network error in POST request when adding a body

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related