CODEWITHSUNDEEP
angularfirebaseionic4
D.Hodges
D.Hodges

Reputation: 2069

How to upload pictures to firebase in Ionic 4?

I'm unable to upload images to firebase. Any help would be appreciated.

Is anyone familiar with how to upload pictures to firebase in Ionic 4.0? Below is the code that use to work in Ionic 2, but now when I click the button to upload an image to firebase it takes approximately 30 seconds to respond to the (click) and then it never uploads the image to firebase.

I tried using the example in this tutorial but I can't get rid of the errors related to ImagePicker. https://ionicthemes.com/tutorials/about/ionic-firebase-image-upload Any help would be greatly appreciated.

      <ion-card-content>
            <div>
                <img src="assets/img/add-an-image.png" (click)="selectPhoto()"/>     
            </div>
        </ion-card-content>

constructor(
    private afAuth: AngularFireAuth,
    private camera: Camera) {

        this.afAuth.authState.subscribe(user => {
        this.userId = user.uid;
        this.myPhotosRef = firebase.storage().ref(`/Photos/${ this.userId }/`);
      });
    }

  selectPhoto(): void {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    };

    this.camera.getPicture(options).then((imageData) => {
      console.log(options, 'get pic');
      this.myPhoto = imageData;
      this.uploadPhoto(this.myPhoto);
    }, error => {
      console.log('ERROR -> ' + JSON.stringify(error));
    });
  }

  private uploadPhoto(photoName: string): void {
    this.myPhotosRef.child(photoName)
      .putString(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => {
        this.myPhotoURL = savedPicture.downloadURL;
      });
  }

Upvotes: 4

Views: 6461

Answers (4)

Code Spy
Code Spy

Reputation: 9964

Image upload on Firestore in Ionic 4 app

Check this tutorial link

https://www.freakyjolly.com/ionic-4-image-upload-with-progress-in-firestore-and-firestorage-tutorial-by-application/

enter image description here

Upvotes: 2

Carrie M.
Carrie M.

Reputation: 95

I followed this tutorial from Ionic Themes to upload images to Firebase Storage: https://ionicthemes.com/tutorials/about/ionic-firebase-image-upload

It says it's for Ionic 3 but it also works in Ionic 4.

According to the tutorial, Storage is separate from firestore and the fire storage module, so in your app module, you have to import firebase like this:

import * as firebase from "firebase";
firebase.initializeApp(environment.firebaseConfig)

Upvotes: 0

D.Hodges
D.Hodges

Reputation: 2069

I was able to successfully upload images to firebase using the following tutorial:

https://ionicthemes.com/tutorials/about/building-a-ionic-firebase-app-step-by-step

Upvotes: 0

mmelotti
mmelotti

Reputation: 346

There is really a lot of ways to do this, you can use the response and errors to track what is going on. Enable the web console log.

Here is a example of how to do it and track the errors:

uploadFile(file){
const fileName = this.generateRandomName() + '.jpg';
const fileRef = firebase.storage().ref().child('tptimagefolder/'+ fileName);
const uploadTask = fileRef.put(file);

return new Promise((resolve, reject) => {
    uploadTask.on('state_changed', snapshot => {
},  error => {
      reject(error);

}, () => {
  uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    console.log('teste resolve url'+downloadURL);

    resolve ( {fileName, downloadURL});
  });

});

}); }

this.generateRandomName() is a function to create a name, you can use without it if you want it.

Upvotes: 0

Related Questions