Upload image to firebase using - @angular/fire


#1

install plugin by running command - npm i firebase @angular/fire --save
import firebase store plgin to TS file - import { AngularFireStorage } from '@angular/fire/storage';

HTML - <input type=“file” (change)=“uploadImage($event)”>`

TS - First make sure user is logged in and you have uid

with below code -

this.fireAuth.authState.subscribe(response =>{
   this.uuid = response.uid;
   console.log(this.uuid);
})

input change function -

file:File;
async uploadImage($event){
    try{
      this.file = $event.target.files[0];
      console.log(this.file);
      let fileRef = this.fireStore.storage.ref('profileImages/' + this.uuid + ".jpg");
      fileRef.put(this.file).then(response=>{
        console.log(response);
      }).catch(error=>{
        this.alertFunction(error);
      })
    }catch(e){
      this.alertFunction(e);
  }
}

There you go… Happy coding :slight_smile: