How do I upload an image to firebase using ImagePicker in Expo?

Expo SDK
1

I’ve tried base64, it always gives me an error.

1 Like
2

We’re working on it!

https://github.com/facebook/react-native/pull/11573

2 Likes
3

Any idea on when it’ll be done?

4

see:

it will be done on our next release after it lands in a react-native release, it depends on how long it takes for review etc.

5

Is it done? Already expo sdk 21. Probelm is getting worse.

1 Like
6

^^^ Please God, this needs to be fixed already

7

I get the same error

1 Like
8

Hello,

is there any working solution for uploading image to firebase storage??

Thanks?

9

@suatozkan you can upload base64 string of the image like this:

// pick an image
const result = await ImagePicker.launchImageLibraryAsync({
    base64: true
});

// upload
const snapshot = await firebase.storage().ref()
.child("images")
.child("image.jpg")
.putString(result.base64);

// uploaded
console.log(snapshot.downloadURL);
10

@jannevickholm your code produces the now famous error: Can currenlty only create a Blob from other Blobs.

11

I got that error only when trying to upload multiple images at the same time. If I upload serially it works for me on ios at least.

12

In this small tutorial, I wrote a cloud function that you can use to upload images to Firebase with Expo: https://medium.com/@wcandillon/uploading-images-to-firebase-with-expo-a913c9f8e98d. I hope this helps.

3 Likes
13

@jannevickholm your example works only if you do not prepend ‘data:image/xxx;base64,’. But in that case you don’t get the URL to a usable file.
If you do, you get the error that @herve76 is talking about.
The only workaround I’ve been able to find is to store the base64 string in the database instead of the storage. It works, but is far from optimal.

14

If you don’t mind using cloudinary, I show how to upload and then get the uploaded url to save to firebase
https://medium.com/@ifeoluwaking24/how-to-upload-an-image-in-expo-react-native-to-firebase-using-cloudinary-24aac981c87

Also you can try it snack but make sure you add your cloud_name and upload_preset
https://snack.expo.io/@ifeking/upload-to-cloudinary

1 Like
15

solved here: https://github.com/expo/firebase-storage-upload-example

16

I just get a “response.blob is not a function” error using this code referenced above

17

you need to use sdk 26…

19

UPDATE2: I didn’t properly update to the version 26.0.0
Updating fixed my problem

When trying the solution from https://github.com/expo/firebase-storage-upload-example,
I’m getting the error like “unexpected url: file:///data/user/0/…/xyz.jpg”
When fetching a file. I got the url from the ImagePicker. Like the code sample says

Update: I get the same error when incudling the App.js from the github directly into my app.
The Problem occures on Android.

20

anyone please tell how to upload using function based component to using image picker with expo

21