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

a simplified example of Angular 10 Firebase Cloud Storage image upload using the AngularFire library.

To get started, follow these steps:

Step 1: Set up your Angular project and install AngularFire.

ng new firebase-image-upload

cd firebase-image-upload

npm install firebase @angular/fire

Step 2: Create a Firebase project and set up Firebase Cloud Storage.

Go to the Firebase Console (https://console.firebase.google.com/) and create a new project.

Enable Firebase Cloud Storage in your project.

Step 3: Configure AngularFire in your Angular project.

Open the src/environments/environment.ts file and add your Firebase project configuration.

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    appId: 'YOUR_APP_ID',
  },
};

export const environment = {

production: false,

firebase: {

apiKey: 'YOUR_API_KEY',

authDomain: 'YOUR_AUTH_DOMAIN',

projectId: 'YOUR_PROJECT_ID',

storageBucket: 'YOUR_STORAGE_BUCKET',

appId: 'YOUR_APP_ID',

};

Replace the placeholders with your actual Firebase project details.

Step 4: Create a new component for the image upload.

ng generate component image-upload

Step 5: Update the image-upload.component.html file with the following content:

image-upload.component.html

<input type="file" (change)="handleFileInput($event.target.files)">
<button (click)="uploadImage()">Upload Image</button>

1 2	<input type="file" (change)="handleFileInput($event.target.files)"> <button (click)="uploadImage()">Upload Image</button>

Step 6: Update the image-upload.component.ts file with the following content:

import { Component } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
})
export class ImageUploadComponent {
  selectedImage: File | null = null;

  constructor(private storage: AngularFireStorage) {}

  handleFileInput(files: FileList | null): void {
    if (files && files.length > 0) {
      this.selectedImage = files.item(0);
    }
  }

  uploadImage(): void {
    if (this.selectedImage) {
      const filePath = `images/${Date.now()}_${this.selectedImage.name}`;
      const fileRef = this.storage.ref(filePath);
      const task = this.storage.upload(filePath, this.selectedImage);

      task
        .snapshotChanges()
        .pipe(
          finalize(() => {
            fileRef.getDownloadURL().subscribe((url) => {
              console.log('File available at: ' + url);
            });
          })
        )
        .subscribe();
    }
  }
}

import { Component } from '@angular/core';

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

@Component({

selector: 'app-image-upload',

templateUrl: './image-upload.component.html',

})

export class ImageUploadComponent {

selectedImage: File | null = null;

constructor(private storage: AngularFireStorage) {}

handleFileInput(files: FileList | null): void {

if (files && files.length > 0) {

this.selectedImage = files.item(0);

}

uploadImage(): void {

if (this.selectedImage) {

const filePath = `images/${Date.now()}_${this.selectedImage.name}`;

const fileRef = this.storage.ref(filePath);

const task = this.storage.upload(filePath, this.selectedImage);

task

.snapshotChanges()

.pipe(

finalize(() => {

fileRef.getDownloadURL().subscribe((url) => {

console.log('File available at: ' + url);

});

})

)

.subscribe();

}

Step 7: Update the app.module.ts file to include AngularFire module and configure it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';
import { ImageUploadComponent } from './image-upload/image-upload.component';

@NgModule({
  declarations: [AppComponent, ImageUploadComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireStorageModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AngularFireModule } from '@angular/fire';

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

import { environment } from '../environments/environment';

import { AppComponent } from './app.component';

import { ImageUploadComponent } from './image-upload/image-upload.component';

@NgModule({

declarations: [AppComponent, ImageUploadComponent],

imports: [

BrowserModule,

AngularFireModule.initializeApp(environment.firebase),

AngularFireStorageModule,

providers: [],

bootstrap: [AppComponent],

})

export class AppModule {}

Step 8: Update the app.component.html file to include the app-image-upload component.

<div>
  <h1>Angular Firebase Image Upload</h1>
  <app-image-upload></app-image-upload>
</div>

<div>

<h1>Angular Firebase Image Upload</h1>

<app-image-upload></app-image-upload>

</div>