Monitoring upload using uploadString in Firebase v9 error

user_14961854 0
Viewed 470

While upgrading from Firebase 8 to 9 I've hit a problem. I need to monitor the upload progress of uploadString but uploadTask.on seems to fail.

var uploadTask = uploadString(ref(this.$storage, 'profile.jpg'), canvas.toDataURL('image/jpeg', 0.8), 'data_url');

uploadTask.on('state_changed', 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
  }
);

The image gets uploaded but with the following error:

"TypeError: uploadTask.on is not a function"

uploadTask.on with putString in version 8 works fine. Anyone know what is going on? Thanks in advance.

firebase-storage firebase javascript
2 Answers

I found a work around for anyone interested, it works specifically for canvas elements and uses uploadBytesResumable instead. Still interested in how do achieve this with uploadString if anyone knows.

var img = canvas.toDataURL('image/jpeg', 0.8);
var file = now.dataURItoBlob(img);
var uploadTask = uploadBytesResumable(ref(now.$storage, 'profile.jpg'), file);

uploadTask.on('state_changed', 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
  }
);

dataURItoBlob function is as follows

dataURItoBlob(dataURI) {
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0){
        byteString = atob(dataURI.split(',')[1]);
    }
    else{
        byteString = unescape(dataURI.split(',')[1]);
    }
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}
user_149618540

uploadString() returns an uploadTask.You use it to monitor the status of your upload

user_170324310
Related