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.
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});
}
uploadString() returns an uploadTask.You use it to monitor the status of your upload