0

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));
});
João Pedro
  • 3
  • 1
  • 5
  • Are you really using TypeScript? What compiler errors are you getting? What is `BLOB`? – jcalz Oct 19 '17 at 18:51
  • Yep, Typescript, Ionic3. Sorry for the BLOB, just sort of debugging I was trying, already edited it. I'm not getting compiler erros, I'm just getting "undefined" as return of the function "makeFileIntoBlob". – João Pedro Oct 19 '17 at 18:55
  • This might be a duplicate of [Javascript Promises with FileReader()](https://stackoverflow.com/questions/34495796/javascript-promises-with-filereader), since your issue is that you are using a `FileReader` but not using its callbacks to resolve/reject a `Promise`. – jcalz Oct 19 '17 at 19:08

1 Answers1

0

As I said in the comment, your issue is that you are using a FileReader but not using its callbacks to resolve/reject a Promise. You need to return a Promise instead. You're also not actually using the FileReader to read anything from imagePath, but I don't even know if that would work because FileReader reads Files or Blobs, not URIs. If the URI is a data:// URI you can convert it into a Blob with some code. If it's a file:// URI then you don't have permission to do that in a browser unless you are chrome-privileged. Wait, are you in a browser?

Unfortunately I don't think you posted enough info for anyone to reproduce. Are you using Cordova? If so, why not use the returned file:// url with the File Transfer API instead of trying to pass it through a FileReader? If that doesn't work I can't really help you because I don't know anything about Cordova. You might want to add a tag so other people can help you. And be sure to search StackOverflow for other relevant questions that might be applicable.

Good luck!

jcalz
  • 264,269
  • 27
  • 359
  • 360