How to upload photo taken on phone through devapp on firebase storage in Ionic 4

Question

I am trying to upload a photo taken through my phone's camera (With Ionic 4 Native Camera Plugin through DevApp) and upload it to Firebase Storage. Now I am able to take the photo, but when I upload it, the console does not throw any errors and just does not do anything. In the end, the photo is not uploaded to the firebase storage.

Here are my codes:

.html:

<ion-button (click)="takePicture()"></ion-button>

.ts:

  takePicture(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
     }

     this.camera.getPicture(options).then((imageData) => {
       var storage = firebase.storage().ref();
       var photoRef = storage.child('Manager Images'); 
       console.log(photoRef); <-- This reference is correct

       let base64Image = 'data:image/jpeg;base64,' + imageData;
       console.log(base64Image); <-- Returns "data:image/jpeg;base64,file:///storage/emulated/0/Android/data/io.ionic.devapp/cache/1577622281686.jpg"

       // Base64 formatted string
       var message = imageData;
       photoRef.putString(message , 'base64', { contentType: 'image/jpg' }).then((savedPicture) => {
       console.log(savedPicture.downloadURL);
});


   }, (err) => {
    // Handle error
   });
  }

Am I doing something wrong with the .putString method? I referred to https://firebase.google.com/docs/storage/web/upload-files for the guidelines but I still can't get this to work. Please help!

score 1 · Accepted Answer · answered Dec 29 '19 at 15:08

1

Change destination type to this.camera.DestinationType.DATA_URL to get base64 and then put it into firebase storage.

  takePicture(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
    ...

PS. be sure if let base64Image = 'data:image/jpeg;base64,' + imageData; is necessarily or if imageData already has coded type in base64 format.

answered Dec 29 '19 at 15:08

Michał Dziwota

838
7
16

Thank you for your answer! It worked! I left the base64Image variable as it is. – John Arc Dec 29 '19 at 15:17

prosper1 · Answer 2 · 2019-12-29T13:41:30.497

0

Change this line and it should work.

var message = base64Image;

imageData is not 'base64'

Or Upload as File ,Use the file as it is.

var file = imageData
photoRef.put(file).then(snapshot => {
    console.log('Uploaded a blob or file!')
});

edited Dec 29 '19 at 13:41

answered Dec 29 '19 at 11:48

prosper1

304
2
9

By the way, when I did the console.log for the 'message' variable, this is what I got: "data:image/jpeg;base64,file:///storage/emulated/0/Android/data/io.ionic.devapp/cache/1577622281686.jpg" I have a feeling it's because of the link after the base64,file:///... – John Arc Dec 29 '19 at 12:27
Try the Above. did you try as file before using Put ? – prosper1 Dec 29 '19 at 13:45
Tried it, still doesn't work. The outcome is the same as before. – John Arc Dec 29 '19 at 14:30

How to upload photo taken on phone through devapp on firebase storage in Ionic 4

2 Answers2