list file attachments

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -18,5 +18,9 @@
       <mat-icon>cloud_upload</mat-icon>
     </button>
   </div>
+
+  <p *ngFor="let file of (files$|async)">
+    <app-file [file]="file"></app-file>
+  </p>
 </app-card>
 

src/app/modules/songs/song/edit/edit-file/edit-file.component.ts

@@ -2,7 +2,10 @@ import {Component} from '@angular/core';
 import {Upload} from '../../../services/upload';
 import {UploadService} from '../../../services/upload.service';
 import {ActivatedRoute} from '@angular/router';
-import {map} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
+import {FileDataService} from '../../../services/file-data.service';
+import {Observable} from 'rxjs';
+import {File} from '../../../services/file';
 
 @Component({
   selector: 'app-edit-file',
@@ -14,13 +17,24 @@ export class EditFileComponent {
   public selectedFiles: FileList;
   public currentUpload: Upload;
   public songId: string;
+  public files$: Observable<File[]>;
 
-  constructor(private activatedRoute: ActivatedRoute, private uploadService: UploadService) {
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private uploadService: UploadService,
+    private fileService: FileDataService,
+  ) {
     this.activatedRoute.params.pipe(
       map(param => param.songId),
     ).subscribe(songId => {
       this.songId = songId;
     });
+
+    this.files$ = this.activatedRoute.params.pipe(
+      map(param => param.songId),
+      switchMap(songId => this.fileService.read$(songId))
+    );
   }
 
   detectFiles(event) {

src/app/modules/songs/song/edit/edit-file/file/file.component.html

@@ -1 +1,3 @@
-<p>file works!</p>
+<a [href]="url$|async" target="_blank">
+  {{name}}
+</a>

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -1,4 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {Observable} from 'rxjs';
+import {File} from '../../../../services/file';
+import {AngularFireStorage} from '@angular/fire/storage';
 
 @Component({
   selector: 'app-file',
@@ -6,11 +9,20 @@ import {Component, OnInit} from '@angular/core';
   styleUrls: ['./file.component.less']
 })
 export class FileComponent implements OnInit {
+  public url$: Observable<string>;
+  public name: string;
 
-  constructor() {
+  constructor(private storage: AngularFireStorage) {
   }
 
-  ngOnInit() {
-  }
+  @Input() set file(file: File) {
 
+    const ref = this.storage.ref(file.path + '/' + file.name);
+    this.url$ = ref.getDownloadURL();
+    this.name = file.name;
+
+  };
+
+  ngOnInit(): void {
+  }
 }