export class Input {
  file: File;
  name: string;
}

<div class="custom-file align-self-center">
    <input type="file" class="custom-file-input" id="porfolioImage" accept="image/*, video/*" (change)="handleFileInput($event.target.files, 'porfolioImage')">
    <label class="custom-file-label" for="porfolioImage"> {{ placeholder1 }} </label>
</div>

export class AdminFrontComponent implements OnInit {

  task: AngularFireUploadTask;

  files: Input[] = [];

  percentage: Observable<number>;

  handleFileInput(files: FileList, event: string) {
    const firstFile = files.item(0);
    this.files.push({ file: firstFile, name: event});
  }

  constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }

  startUpload(name: string, color: string) {
    for (let i = 0; i < this.files.length; i++) {
      const file = this.files[i].file;

      const path = `${new Date().getTime()}_${file.name}`;

      this.task = this.storage.upload(path, file);

      this.percentage = this.task.percentageChanges();

      this.task.snapshotChanges().pipe(
        finalize(() => {
          this.db.collection('entries').doc(name).set( { name, header: color} );
          (this.task).task.snapshot.ref.getDownloadURL().then(url => {
              const field = this.files[i].name;
              const img = {};
              img[field] = url;
              this.db.collection('entries').doc(name).update(img);
          });
        })
      ).subscribe();
    }
  }

...

}