Make file into Blob on TypeScript for Ionic

Question

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

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

jcalz · Answer 1 · 2017-10-20T12:53:09.307

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!

Make file into Blob on TypeScript for Ionic

1 Answers1