ImagePicker base64 option not working

#1

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
#2

Anyone have any idea?

#3

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

#4

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

#6

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

#7

Hello, is it still working??

#8

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

#9

@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 https://firebase.google.com/docs/storage/web/upload-files

This code produces the following error