So I’ve spent the last 10 hours trying to upload a blob for an image to Firebase storage. I FINALLY Got it working. All my trouble came from a firebase bug. here’s how to fix it. (The answer by “Wyan Arent”)
And incase you dont know how to construct a blob and you’re too lazy to leave the page:
This code is for “image/png”, just change “contentType” to whatever format. The example image used is a red dot. (Base 64 Format). The “512” is my slice size. (was using 1024 before)
…pages/whatever/whatever
b64toBlob(b64Data, sliceSize) {
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
let blob
blob = new Blob(byteArrays, {type:"image/png"});
// var url = URL.createObjectURL(blob);
return blob;
}
Then I grab my image from the gallery
takePicture(){
Camera.getPicture({
quality : 50,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit : true,
encodingType: Camera.EncodingType.PNG,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: true
}).then(imageData => {
this.profileData.updateProfilePicture(this.b64toBlob(imageData, 512));
}, error => {
// alert("ERROR -> " + JSON.stringify(error));
});
}
…/providers/profile-data/profile-data
updateProfilePicture(picture: any = null): any{
return this.UserPictureRef.child("folder").child('profilePicture.png')
.put(picture, metadata).then((savedPicture) => {
this.userProfile.child(this.currentUser.uid).update({
profilepicture: savedPicture.downloadURL
});
})
}
Dont forget to fix the bug. The link is here. The answer by “Wyan Arent”