Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on May 16, 2023

 

 

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.

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
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

 

 

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:

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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.

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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.

1
2
3
4
<div>
  <h1>Angular Firebase Image Upload</h1>
  <app-image-upload></app-image-upload>
</div>

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme