Hi! I recently found out from expo that it supports base64 in ImagePicker. Therefore I tried to use that to upload to firebase storage and firebase emits error message when I tried to upload.
Error message:
I’ve read solution about using aws s3 but I didn’t like it. I don’t even like it to set any middle router to request to upload file to firebase storage. I just want this work purely just in expo project.
I am really looking forward for firebase storage to working like a charm in expo.
So when will this be possible? Also why base64 from ImagePicker not working correctly?
2 Likes
nikki
July 5, 2017, 5:38pm
2
Can we see your code for this? Also rather than just uploading, you could take the generated base64 string and make a data URI and display with an Image component to check.
Thank you for reply.
Here I pasted the code. Please tell me what am I doing wrong.
CODE:
RESULT:
[FirebaseError: Firebase Storage: String does not match format ‘base64’: Invalid character found]
3 Likes
Hello. I have the same problem. Thank you for the reply.
1 Like
DId anybody tried this out?
How can I solve this problem??
nikki
July 8, 2017, 4:18pm
6
Re: ImagePicker base64 to firebase storage problem <— on this post I suggested how to convert to a data URI to test
@aaronksaunders Thanks man. It solved.
you’re welcome - glad to help out
i also have same problem how u remove it
1 Like
Hi, if you don’t mind using cloudinary, I show how to upload and then get the uploaded url to save to firebase
Also you can try it snack but make sure you add your cloud_name and upload_preset
I was having the same problem. It’s not really a problem with the string, but just Firebase’s code trying to call the atob function, which does not exist in JavaScriptCore, and is not polyfilled by React-Native either.
This is the offending piece of code. As you can see, it is inside a try/catch which makes things worse, since we don’t get the real error details.
var bytes;
try {
bytes = atob(string);
}
catch (e) {
throw errorsExports.invalidFormat(format, 'Invalid character found');
}
I solved it by polyfilling the atob function, using base-64.
yarn add base-64
Then just make sure to do the polyfilling before calling putString.
// polyfills.js
import Base64 from 'base-64';
global.atob = Base64.encode;
Good luck!
4 Likes
When i add this code, the error does go but my putString just hangs. did you find this?
const snapshot = await ref.putString(
base64EndodedImage.replace(/(?:\r\n|\r|\n)/g, ''),
'data_url'
);
