Is it possible to get the binary data from an image in React-Native?

Question

I\'m using react-native-camera and I\'m having trouble getting the image as binary data in react-native. I need this to be able to upload images to our

Answer 1

If you want to get image as binary data from react-native-camera. I recommend to use react-native-fs to read uri

Example

const RNFS = require("react-native-fs");
// response.uri from react-native-camera
RNFS.readFile(response.uri, "base64").then(data => {
  // binary data
  console.log(data);
});

If you want to upload image via FormData I recommend rn-fetch-blob

Example

import RNFetchBlob from 'rn-fetch-blob'
// response.uri from react-native-camera
const path = response.uri.replace("file://", "");
const formData = [];
formData.push({
  name: "photo",
  filename: `photo.jpg`,
  data: RNFetchBlob.wrap(path)
});

let response = await RNFetchBlob.fetch(
  "POST",
  "https://localhost/upload",
  {
    Accept: "application/json",
    "Content-Type": "multipart/form-data"
  },
  formData
);

Answer 2

An alternative if you're already using react-native-camera is upon capturing the image, you request it as base64 directly as such:

takePicture = async function(camera) {
  const options = { quality: 0.5, base64: true, doNotSave: true }
  const data = await camera.takePictureAsync(options)

  console.log(data.base64)
}

If your goal is to only snap the picture, show a preview perhaps then upload to the server and move on, then the benefit of this approach is that it won't save that photo in your device cache (doNotSave: true). Which means that you don't need to worry about cleaning those up after you're done.