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.
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:
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.
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> |