I'm trying to upload a Blob file into Firebase but I keep getting "undefined" as return of the "makeFileIntoBlob" function. I'm running it on Android. I Can get the filepath after taking picture but when I call the function to retrieve a Blob to upload it on Firebase, I get the Blob file as "undefined". Some Help?
Heres the Function where I upload the image to Firebase Storage
uploadToFirebase(imageBlob) {
var fileName = 'sample.jpg';
return new Promise((resolve, reject) => {
var fileRef = firebase.storage().ref('Animais/' + fileName);
var uploadTask = fileRef.put(imageBlob);
uploadTask.on('state_changed', (snapshot) => {
console.log('snapshot progess ' + snapshot);
}, (_error) => {
reject(_error);
}, () => {
// completion...
resolve(uploadTask.snapshot);
});
});
}
Heres the Function where I try to Make a Blob from FilePath
makeFileIntoBlob(imagePath) {
var reader = new FileReader();
reader.onloadend = (evt: any) => {
var imgBlob: any = new Blob(imagePath);
imgBlob.name = 'sample.jpg';
return imgBlob;
};
reader.onerror = (e) => {
console.log('Failed file read: ' + e.toString());
};
Heres the function where I Take the Picture
takePic(){
let imageSource;
this.camera.getPicture({
destinationType: this.camera.DestinationType.FILE_URI,
sourceType: imageSource,
encodingType: this.camera.EncodingType.JPEG,
targetHeight: 640,
correctOrientation: true,
saveToPhotoAlbum : true
}).then((imagePath) => {
alert('got image path ' + imagePath);
// convert picture to blob
return this.makeFileIntoBlob(imagePath);
}).then((imageBlob) => {
alert('got image blob ' + imageBlob);
// upload the blob
return this.uploadToFirebase(imageBlob);
}).then((uploadSnapshot: any) => {
alert('file uploaded successfully ' + uploadSnapshot.downloadURL);
// store reference to storage in database
return this.saveToDatabaseAssetList(uploadSnapshot);
}).then((uploadSnapshot: any) => {
//alert('file saved to asset catalog successfully ');
}, (error) => {
alert('Error ' + (error.message || error));
});