Angular 10 Firebase Cloud Storage Image Upload Using AngularFire Library Full Project For Beginners

Angular 10 Firebase Cloud Storage Image Upload Using AngularFire Library Full Project For Beginners

Welcome folks today in this tutorial we will be looking at how to do firebase cloud storage image upload in angular 10 application using the angularfire library. This will be a full tutorial for beginners. All the source code of the video is given below and the video is also given below to see it to better follow with the blog.

 

 

Screenshot

 

 

Requirements

 

npm i @angular/fire firebase

 

Execute this command to install these two dependencies into your angular project.

 

import {AngularFireStorageModule} from '@angular/fire/storage'
import {AngularFireModule} from '@angular/fire'

 

Include them in app.module.ts file

 

AngularFireModule.initializeApp({
      apiKey: "",
      authDomain: "",
      storageBucket: "",
      projectId: "",
    }),
    AngularFireStorageModule

 

Inside the imports array configure the angularfiremodule by passing the properties of your project.

See also  Node.js FFMPEG Colorful Progressbar CLI ffmpeg-progressbar-cli Library Full Tutorial and Setup 2020

 

<label for="file">File:</label>
<input type="file" (change)="upload($event)" accept=".png,.jpg" />
<button (click)="uploadImage()">Upload Image</button>

 

Simple html required for image upload here we have one select input tag for image upload and a simple button which will trigger image upload

 

import {AngularFireStorage} from '@angular/fire/storage'

 

import the angularfirestorage module in app.component.ts file at the very top of the file

 

export class AppComponent {
  filePath:String
  constructor(private afStorage: AngularFireStorage) { }
  upload(event) {    
    this.filePath = event.target.files[0]
  }
  uploadImage(){
    console.log(this.filePath)
    this.afStorage.upload('/images'+Math.random()+this.filePath, this.filePath);
    
      
  }
  
}

 

 

Leave a Reply