4

I'm right now working on a react native project that have a taking image and upload function, and I'm using react-native-fetch-blob for passing multipart data to upload a single file. However, it seems to be not passing any data to my api.

I'm also using react-native-camera for capturing image. According to some usage of that module, my project is able to capture image and display the image by calling this function. 

this.camera.capture({ metadata: options })
  .then((data) => {
    console.log("image path: ", data.path);
  })
  .catch(err => console.error(err));

Then I got the result like this, 

image path: /var/mobile/Containers/Data/Application/.../AE1E52F0-8522-44D5-8603-21FB4EC9EAF9.jpg

So I used RNFetchBlob with this path to send image to my api like this, 

RNFetchBlob.fetch(
  'POST', 
  [url], 
  {
    Authorization: jwtToken,
    'Content-Type': 'multipart/form-data'
  }, 
  [
    { 
      name: 'file',
      filename: 'AE1E52F0-8522-44D5-8603-21FB4EC9EAF9.jpg', 
      type: 'image/jpeg', 
      data: RNFetchBlob.wrap('/var/mobile/Containers/Data/Application/.../AE1E52F0-8522-44D5-8603-21FB4EC9EAF9.jpg') 
    }
  ]
).then((response) => {
  console.log("res: ", response.text());
})
.catch((error) => {
  console.log(error);
});

After that, I checked the request that I can get from my API, it shows like this:

{ 
    host: 'localhost:3000',
    connection: 'close',
    'content-type': 'multipart/form-data; charset=utf-8; boundary=RNFetchBlob1881293472',
    'user-agent': 'app/1 CFNetwork/811.5.4 Darwin/16.6.0',
    accept: '*/*',
    'accept-language': 'zh-tw',
    authorization: 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1OTUxMzYxZDBkMTk3MjczNjNiMzRhN2EiLCJ1c2VyVHlwZSI6InVzZXIiLCJpYXQiOjE0OTg0OTQ1MTUsImV4cCI6MTQ5OTA5OTMxNX0.8vhDJtFugi4OQAJ48PTsBlAp8bw6x__KwOXvk6xuYW8',
    'content-length': '552434',
    'accept-encoding': 'gzip, deflate' 
}

But I tried console my req.body I got empty object {} from that. Can you give me some suggestion on that? Thank you~

I'm using "react-native-fetch-blob": "^0.10.5" and "node": "v6.10.2"

n1stre
  • 5,856
  • 4
  • 20
  • 41
Elvis Wong
  • 348
  • 2
  • 8
  • Did you get to the bottom of this? I'm having a similar issue, though I'm passing into 'data' a base64 encoded version of the binary file data of an image - rather than wrapping a file path. My request received by the server just has empty strings where the image data should be! – Ollie H-M Aug 18 '17 at 23:51
  • Did you managed to resolve this issue? I am having same problem with react-native-fetch-blob – Dirindon Jun 14 '18 at 07:50

0 Answers0