Upload Multiple Images to Firebase Storage with Angular

November 26, 2019

We are creating a Project to upload angular multiple Images using a Firebase database.

Step-1. Create a new Angular Project open command window then write a command.

#ng new UploadImageApp

Step-2. Install firebase inside your App folder.

#cd UploadImageApp
#npm install angularfire2 firebase --save

Step-3 Go to firebase console then create a project then click project overview then go to project setting and get a firebase Api then go to app/enviroments/environments.ts file then Paste the firebase API.

Step-4. Go to the app folder then open app.module.ts Paste this code inside the app. module file

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { DropZoneDirective } from './drop-zone.directive';
import { FileUploadComponent } from './file-upload/file-upload.component';
import { FileSizePipe } from './file-size.pipe';

import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import {FormsModule} from '@angular/forms';

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

import { CustomMaterialModule } from './core/material.module';
import { UploadFormComponent } from './upload-form/upload-form.component';

// import { HelloComponent } from './hello.component';

const approaches: Routes = [
  { path: 'file-upload', component: FileUploadComponent },

{ path: '',
    redirectTo: '/file-upload',
    pathMatch: 'full'
  },

];

@NgModule({
  declarations: [
    AppComponent,
    DropZoneDirective,
    FileUploadComponent,
    FileSizePipe,
    LoginComponent,
    UploadFormComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireStorageModule,
    FormsModule,
    BrowserAnimationsModule,
    CustomMaterialModule,
    RouterModule
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step-5. Go to the app-routing.module.ts file then paste this code.

Step-6. Go to Command Window write a command

# ng g component upload-form

Step-7. Go to app/upload-form folder then open file-upload. component file pastes this code inside the file.

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireUploadTask } from 'angularfire2/storage';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
import { tap } from 'rxjs/operators';
import { finalize } from 'rxjs/operators';

import {Router} from '@angular/router';

import { map, filter, switchMap, take } from 'rxjs/operators';
import * as firebase from 'firebase';

import { combineLatest } from 'rxjs';

@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss'],

})
export class FileUploadComponent {
  uploads: any[];
  allPercentage: Observable<any>;
  files: Observable<any>;
  constructor(public afs: AngularFirestore,
    public storage: AngularFireStorage,private router: Router) {
  }
  ngOnInit() {
    this.files = this.afs.collection('files').valueChanges();

}
  importImages(event) {
    // reset the array
    this.uploads = [];
    const filelist = event.target.files;
    const allPercentage: Observable<number>[] = [];

for (const file of file list) {

const path = `files/${file.name}`;
      const ref = this.storage.ref(path);
      const task = this.storage.upload(path, file);
      const _percentage$ = task.percentageChanges();
      allPercentage.push(_percentage$);

// create composing objects with different information. ADAPT THIS ACCORDING to YOUR NEED
      const uploadTrack = {
        fileName: file.name,
        percentage: _percentage$
      }

// push each upload into the array
      this.uploads.push(uploadTrack);

// for every upload do whatever you want in a firestorm with the uploaded file
      const _t = task.then((f) => {
        return f.ref.getDownloadURL().then((url) => {
          return this.afs.collection('files').add({
            name: f.metadata.name,
            url: url
          });
        })
      })

}

this.allPercentage = combineLatest(allPercentage)
      .pipe(
      map((percentages) => {
        let result = 0;
        for (const percentage of percentages) {
          result = result + percentage;
        }
        return result / percentages.length;
      }),
      tap(console.log)
      );

}

// Main task

logout() : void {
   
     this.router.navigate(["login"]);

}
}

Step-8. Go to file-upload.component.html file inside the file paste this code.

<mat-toolbar color="primary">
  <mat-toolbar-row>
  <span>Image Uploading Cloud</span>
      <span class="example-fill-remaining-space"></span>
      <span class="align-center"></span>
      <span class="example-spacer"></span>
      <button mat-raised-button (click)="logout()" color="primary">Logout</button>
      <button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>
      <mat-icon>dialpad</mat-icon>
      <span>Redial</span>
    </button>
    <button mat-menu-item disabled>
      <mat-icon>voicemail</mat-icon>
      <span>Check voicemail</span>
    </button>
    <button mat-menu-item>
      <mat-icon>notifications_off</mat-icon>
      <span>Disable alerts</span>
    </button>
  </mat-menu>
</mat-toolbar-row>
</mat-toolbar>

<h2>UPLOADING IMAGES CLOUD</h2>
  <div *ngFor="let upload of uploads">
    <h3>Upload of {{upload.fileName}}</h3>
    <p> Progress: {{upload.percentage | async}}</p>
  </div>

<br>
  <br>
  <h2>{{allPercentage | async}}</h2>
  <br>

<br>
  <br>
  <br>
  <br>
  <br>
 <h2>FIRESTORE VALUES</h2>
  <div *ngFor="let file of files | async">
    <h3>Upload of {{file.name}} DONE and saved in firestore</h3>
    <p>url: {{file.url}} <img [src]="file.url" height="40" /></p>
  </div>

We are creating a Project to upload angular multiple Images using a Firebase database.

Comments