ImagePicker base64 option not working

Hi all,

I am trying to get the base64 encoded string from a selected image using ImagePicker. I set the base64 option to true, but there is no base64 option in the resulting object. What I ultimately want to do is upload the image to firebase storage, so it is possible that I could use base64, File API, or Blob API. I thought it would be easy to use base64 because of the option with ImagePicker.

One possibility is that it’s because the images I am attempting to upload are .jpg files instead of .jpeg like the documentation states it would need.

So I just want to upload my image using either base64, File API, or Blob API. Can anyone recommend the best method?

    pickImg = async () => {
        let pickerResult = await ImagePicker.launchImageLibraryAsync({
            base64: true,
            allowsEditing: false,
            aspect: [4,3]
        })
       console.log(pickerResult)
    }

When I log pickerResult I get:

{
  "height": 2848,
  "origURL": "assets-library:\/\/asset\/asset.JPG?id=B84E79-475C-4727-A4A4-B77AA980897&ext=JPG",
  "cancelled": false,
  "width": 4288,
  "fileSize": 342120,
  "isVertical": false,
  "uri": "file:\/\/\/Users\/metheuser\/Library\/Developer\/CoreSimulator\/Devices\/65026F5-B668-4C02-9976-70BFB\/data\/Containers\/Data\/Application\/56A0B502-4DED-4377-B48D-A95EB2DC40F6\/Library\/Caches\/ExponentExperienceData\/myprojecta\/ImagePicker\/73ED92A-46FF-43D2-BECD-205F2A437.jpg"
}
1 Like

Anyone have any idea?

what sdk version are you using? in app.json or exp.json

here’s an example of it working as expected using the code that you provided: https://snack.expo.io/rymMHDOFb

the base64 format returns by expo 21 has changed since expo 20. it breaks my code for uploading it to firebase. still no solution at this day

Hello, is it still working??

yes this is working, i don’t know what @herve76 was referring to

see the previous snack i linked to, but on sdk22: https://snack.expo.io/B1X8Y67kf

@notbrent thank you for looking into this topic, I know your time is precious.

@mattyfew was trying to use the base64 of the image return from ImagePicker to upload it to Firebase storage, the code is like this:

var pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 0.8,
      base64: true
    });

var metadata = { contentType: 'image/jpeg' }
setTimeout(() => {
      global.firebaseApp.storage().ref()
      .child("images")
      .child("image.jpg")
      .putString(pickerResult.base64,"base64", metadata)
      .then( (snapshot) => {
        console.log(snapshot.downloadURL)
      })
 }, 2000);

This is the sample code from Upload files with Cloud Storage on Web  |  Firebase Storage

This code produces the following error

I think you have to convert it to utf8 before sending it to the database

This is old as hell but … the issue remains. I have been trying to no avail. Installed base-64 encode/decode into global.atob / global.btoa, but we still get this error.

It has to do with Firebase though, not Expo … just wondering if anyone has any workaround?
Currently uploadbytes randomly crashes in v9.