CODEWITHSUNDEEP
angularfirebasefirebase-storage
cerealex
cerealex

Reputation: 1691

Upload base64 image to Firebase Storage throws cryptic Angular error

I'm trying to upload a base64 image to Firebase storage through regular Firebase api. This is the code:

finalName = this.generateRandomName();
const storageRef = firebase.storage().ref(filePath);

console.log(filePath); // users/foouid
console.log(finalName); // foo.jpg
console.log(storageRef); // Reference {authWrapper: AuthWrapper, location: Location}
console.log(file); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQE ...

return storageRef.child(finalName).putString(file, 'base64', {contentType: 'image/jpeg'});

Everything logs correct information but on the next line for some reason Angular throws the following error only mentioning the button that triggers the function in the view:

RegisterComponent.html:281
ERROR Error: [object Object]
    at viewWrappedDebugError (core.js:7595)
    at callWithDebugContext (core.js:11361)
    at Object.debugHandleEvent [as handleEvent] (core.js:11054)
    at dispatchEvent (core.js:7717)
    at core.js:8161
    at HTMLButtonElement.<anonymous> (platform-browser.js:995)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3815)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

Also, no http post is sent in network.

Upvotes: 0

Views: 717

Answers (1)

cerealex
cerealex

Reputation: 1691

Turns out Firebase Storage didn't like the start of the string data:image/jpeg;base64, since the method already deals with that. Removing it from the base64 string works just fine.

Upvotes: 1

Related Questions