It will just work when it support javascript Blob object. Hope this is implemented soon which I thought would be released in Expo sdk 21.
I hope so because this is really holding up my prod
I’m also pretty blocked by this. Please add blob support.
1 Like
Hi! We’re still waiting on the upstream PR referenced earlier in this thread to be merged and shipped.
4 Likes
many people are stuck and cannot to production because of this issue.
1 Like
Hello @aaronksaunders
I got this error when uploading image to firebase storage using your code base.
Please let me know how to solve this. Thanks
To get around this, I ended up just uploading the base64 as a raw string to firebaase, and when I need the data, I just initiate a fetch request, from the url returned by the firebase getDownloadURL() method. You can also attach meta data when uploading raw. Please see below for an example:
/*
*
Retrieves the requestedbase64
*
*/
//Gets the download url of the image requested, and returned as a promise
this._imageDownloadPath.child('Imag2').getDownloadURL()
.then( (url) => {
fetch(url)
.then( (response) =>{
//return response object
return response
})
.then( (res) => {
//Sets the state to the base64 of the image requested, so it can be displayed
this.setState({img: res._bodyInit})
});
})
/*
*
Uploads the base64 to firebase as a raw string
*
*/
upload = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
base64: true
});
if (!result.cancelled) {
try{
var metadata = {
contentType: 'image/png',
customMetadata: {
'location': 'Egypt'
}
};
//Concat the image type to the base64 data
let message = 'data:image/png;base64, '+ result.base64;
//Uploads the base64 to firebase as a raw string, with the specified metadata
this._imageUploadPath.child('Imag2').putString(message,"raw",metadata).then( () => console.log("done")).catch( (err) => console.log(err) ) ;
this.setState({ images: result.uri });
}
catch(err){
console.log(err);
}
@js1599 @davepack I’ve tried your solution today and it worked fine. So I tried to give a flag when saving then get base64 to fetch url when flag is on just to differentiate previous uploaded files.
When I finished it. I feel like this is very bad implementation because I have to do the async await fetch everytime to get the url and like chat app, I have to fetch every user’s image fetching. It just doen’t feel right to me.
This should be just uploading file right away to firebase. I hope I can soon do upload file directly to firebase from expo. I already took more than 2months waiting…
@dooboolab : Actually, I used this on my social media app, and whenever a user pushes data to Firebase. the other users get it on instant push. You should be listening for the event to be triggered, and compare the current DB snapshot to the update before rerendering.
@js1599
What I meant was to load the uri to image again I need to do another fetching. If I have lists of chats in redux array and get props to render listview… I need fetching url for user images through all the array to get the uri again. Also since I cannot put this into props I need to assign props to state and change urls calling fetching too. This kind if implementation doesn’t feel right to me. Why just can’t I load firebase image url in storage directly from Image component? Please make this work for all of us… What we need is just uploading image to firebase storage.
2 Likes
any updates to this desperately need it the above solutions were not working for me…
we are still trying to get the PR upstreamed in react native. comment here if you want. it’s been waiting for almost a year to get in 
https://github.com/facebook/react-native/pull/11573
1 Like
I try the blob but I can’t link it to the project I read all of the above and I get the feeling that we are trying to get around and not solving the issue am I right?
Yes, the root cause is that React Native doesn’t have support for blobs yet. Since it’s fairly intertwined with other libraries like the networking APIs, we have invested in and are waiting for it to land upstream. The current status is that it’s been imported into FB’s internal codebase and still needs to go through review, which will take an unknown amount of time.
1 Like
Hi Ide do you have a example on how to upload an image from camera and library with a url to retrieve the image later?
I setup a server with expressJS and multer and multerS3 with the basic .single(‘photo’) endpoint that returns the uploaded url to S3 by returning req.file.location.
Then used the example from
https://github.com/expo/image-upload-example/blob/master/frontend/App.js
to upload the file to the server and retrieve the response and then save to DB.
2 Likes
This answer is going back to the very first of this question which is like 4 month before. We know it is working fine with amazon s3 or other backends. What we want is using firebase storage!!!
All of these people were suffering for this for long time and still suffering today.
We really need solution for this.
Hi! Upstream RN merged blob support recently, should be available in a release within 1-2 months!
4 Likes
@js1599 I like the solution you proposed. However when using putString, I’m getting the following error: Dropbox - File Deleted
Is that something that you’ve encountered as well?
Is there a way we can use that now?