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 backend. The only thing I manage to get is uri's to the image and then maybe sending that as FormData to the server but that is not recommended as that would require some infrastructure change to our backend.

Is there anyone that know a solution or some tips regarding this issue?

Any thoughts or help is very much appreciated.

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.

Answer 3

You can use 'react-native-image-crop-picker' to pick image and video. Set following property to true

includeBase64: true

and image file content will be available as a base64-encoded string in the data property

ImagePicker.openPicker({
  mediaType: "photo",
  includeBase64: true // this will give 'data' in response 
})
.then((response) => {
    console.log(resonse.data)
})
.catch((error) => {
   alert(error)
});