Ionic & Firebase Uploading Blobs Error


#1

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”


#2

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;                
           
 })
 }

#3

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.


#4

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


#5

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.


#6

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()});
})


#7

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


#8

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.


#9

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


#10

Here you go.


#11

Hi can you please help me, I keep getting

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


#12

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