Ionic & Firebase Uploading Blobs Error

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”

Oh and if for some reason you’re converting Blobs to base64, use this:

 Blobtob64(blob){
 var reader = new FileReader();
 reader.readAsDataURL(blob); 
 reader.onloadend = (()=> {
            blob = reader.result;                
           
 })
 }

According to your link, the buggy communication with Ionic is now fixed. Just change the script src to 3.6.4 instead of 3.6.2.

Ah you’re right. I’ll do that aswell. thank you.

Hi! thank for your post! this is exactly what I’m looking for hours. However, I still couldn’t make it work . Can you please post the whole code?
I got this error.

Whats your reasoning for uploading as blobs? Firebase have patched this method and you can directly process the image:

return strgRef.child(profilePicture.jpeg)
.putString(imageData, ‘base64’, { contentType: ‘image/JPEG’ })
.then((savedPicture) => {
fbRef.set({URL:savedPicture.downloadURL,name:“profilePicture.jpeg”,lastUpdated:new Date().toDateString()});
})

Oh yes, You can upload base64, but doesnt it take long? Blobs cut down the time to around 5-8 seconds.

Hey. sorrry for the late reply, Ill post my whole code:

I actually redid my code so the user can upload As many pictures as they want to (Using an array of images), Ill make a new topic with that code in it, So anyone can copy that directly.

Oh really. I hadn’t noticed takes about 3/4 seconds max for me to upload a profile picture using this method.

Here you go.

Hi can you please help me, I keep getting

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

1 Like

The b64data parameter isnt encoded correctly. May I see how you’re retrieving the b64data?