Convert Image to base64 in react native

Question

I have used react-native-image-picker and now I select image from the Photo library. To send the that image to API I have to convert it first into base64 and then into byte array. I have the filepath in response.uri. How do I do it?

When I did console.log(response) I am getting this in result

'Response = ', {
  fileSize: 6581432,
  longitude: -17.548928333333333,
  uri: 'file:///Users/shubhamb/Library/Developer/CoreSimulator/Devices/B58314DF-F0A9-48D2-B68A-984A02271B72/data/Containers/Data/Application/63143214-8A03-4AC8-A79C-42EC9B82E841/tmp/2AACBC57-0C07-4C98-985E-154668E6A384.jpg',
  fileName: 'IMG_0003.JPG',
  latitude: 65.682895,
  origURL: 'assets-library://asset/asset.JPG?id=9F983DBA-EC35-42B8-8773-B597CF782EDD&ext=JPG',
  type: 'image/jpeg',
  height: 2002,
  width: 3000,
  timestamp: '2012-08-08T18:52:11Z',
  isVertical: false,
}

See this https://stackoverflow.com/questions/34908009/react-native-convert-image-url-to-base64-string — sangmin, Jul 26 '19 at 01:56
See this https://stackoverflow.com/questions/34908009/react-native-convert-image-url-to-base64-string — sangmin, Jul 26 '19 at 01:59

score 5 · Answer 1 · answered Jul 26 '19 at 03:00

5

Since you're using react-native-image-picker, it already returns the Base64 value in its response

ImagePicker.showImagePicker(options, (response) => {
  const base64Value = response.data;
});

Documentation for the response

answered Jul 26 '19 at 03:00

rabbit87

3,165
2
20
29

Yeah I did that but when I try to print using alert(base64value) it shows undefined. – user11426267 Jul 26 '19 at 05:26
const source = {uri: 'data:image/jpg;base64,' + response.data, isStatic: true} this returns object but then it will work only for jpg. – user11426267 Jul 26 '19 at 05:27
Can you tell what am I doing wrong. I also have to convert that base64 into byte array. – user11426267 Jul 26 '19 at 07:55
I'm not sure why you would get undefined. Can you try console.log(response) and see what the whole value is? As for the byte array, I don't actually have experience on the subject but this might help: https://stackoverflow.com/questions/6226189/how-to-convert-a-string-to-bytearray – rabbit87 Jul 26 '19 at 08:08
Response does not contain data. That is the reason why I am getting undefined. – user11426267 Jul 26 '19 at 08:16
1

That is quite weird, can you check if you set "noData" to true in the options? That might caused the issue – rabbit87 Jul 26 '19 at 10:16
No I have set "noData" to false in the options. – user11426267 Jul 26 '19 at 10:18

score 5 · Answer 2 · edited Apr 12 '21 at 06:21

I suddenly ran into this issue while updating my app. What I found is that previous react-native-image-picker used to provide base64 as response.data. But now there is an includeBase64 in the options object so that you can control whether you need the base64 data or not. So my code became something like the following

captureTradeLicenseImage() {
    let options = {
        maxHeight: 250,
        maxWidth: 350,
        includeBase64: true //add this in the option to include base64 value in the response
    }
    ImagePicker.launchCamera(options, (response)  => {
        console.log('Response = ', response)
        if (response.didCancel) {
            console.log('User cancelled image picker')
        }
        else if (response.error) {
            console.log('ImagePicker Error: ', response.error)
        }
        else if (response.customButton) {
            console.log('User tapped custom button: ', response.customButton)
        }
        else if (response.fileSize > 5242880) {
            Alert.alert(
                "Nilamhut Say\'s",
                "Oops! the photos are too big. Max photo size is 4MB per photo. Please reduce the resolution or file size and retry",
                [
                    { text: "OK", onPress: () => console.log('ok Pressed') }
                ],
                { cancelable: false }
            )
        }
        else {
            this.setState({tradeLicenseImageData: response.base64}) //access like this
        }
    })
}

Ulad Kasach · Answer 3 · 2019-09-27T11:24:18.367

2

The standalone expo FileSystem package makes this simple:

const base64 = await FileSystem.readAsStringAsync(photo.uri, { encoding: 'base64' });

As 2019-09-27 this package handles both file:// and content:// uri's

edited Sep 27 '19 at 11:24

answered Aug 12 '19 at 01:00

Ulad Kasach

11,558
11
61
87

score 2 · Answer 4 · answered Aug 07 '20 at 04:56

I'm too late but if I can help others that is looking how to get the base64 data from an image: In the options object you have to set the base64 option to true, like this:

const options = {
   title: 'Choose an Image',
   base64: true
};

ImagePicker.launchImageLibrary(options, response => {
    console.log(response.data);
});

score 2 · Answer 5 · answered May 27 '22 at 15:09

As simple as that:

import { CameraOptions, ImagePickerResponse, launchCamera } from 'react-native-image-picker';

Wrap in your component: 

const [b64, setB64] = useState<string>("");

const manageImage = async (response: ImagePickerResponse) => {
    if (response.didCancel) {
      return;
    } else if (response.assets) {
        if (response.assets?.length > 0) {
          setB64(response.assets[0].base64 ? response.assets[0].base64 : "");
        }
    }
  }

launchCamera(options, (response) => {
  manageImage(response);
});

score 0 · Answer 6 · answered Aug 22 '23 at 12:12

0

including

includeBase64: true

in the options did return the base64 string for me.

answered Aug 22 '23 at 12:12

Muhammad Umar

190
1
3
15

Convert Image to base64 in react native

6 Answers6