Firebase & AngularFire In Depth

Author: Your Name

src/app/create-course/create-course.component.html

@@ -14,7 +14,9 @@ <h3>Create New Course</h3>
 
       <span>Course thumbnail:</span>
 
-      <img class="course-thumbnail mat-elevation-z3">
+      <img class="course-thumbnail mat-elevation-z3"
+           [src]="iconUrl"
+           *ngIf="iconUrl">
 
       <input type="file" (change)="uploadThumbnail($event)">
 

src/app/create-course/create-course.component.ts

@@ -11,87 +11,98 @@ import Timestamp = firebase.firestore.Timestamp;
 import {CoursesService} from "../services/courses.service";
 
 @Component({
-  selector: 'create-course',
-  templateUrl: 'create-course.component.html',
-  styleUrls: ['create-course.component.css']
+    selector: 'create-course',
+    templateUrl: 'create-course.component.html',
+    styleUrls: ['create-course.component.css']
 })
 export class CreateCourseComponent implements OnInit {
 
-  courseId:string;
+    courseId: string;
 
-  percentageChanges$: Observable<number>;
+    percentageChanges$: Observable<number>;
 
+    iconUrl:string;
 
-  form = this.fb.group({
-     description:  ['', Validators.required],
-      category: ["BEGINNER", Validators.required],
-      url: [''],
-      longDescription: ['', Validators.required],
-      promo: [false],
-      promoStartAt: [null]
-  });
 
-  constructor(private fb:FormBuilder,
-              private coursesService:CoursesService,
-              private afs: AngularFirestore,
-              private router: Router,
-              private storage: AngularFireStorage) {
+    form = this.fb.group({
+        description: ['', Validators.required],
+        category: ["BEGINNER", Validators.required],
+        url: [''],
+        longDescription: ['', Validators.required],
+        promo: [false],
+        promoStartAt: [null]
+    });
 
-  }
+    constructor(private fb: FormBuilder,
+                private coursesService: CoursesService,
+                private afs: AngularFirestore,
+                private router: Router,
+                private storage: AngularFireStorage) {
+
+    }
 
     uploadThumbnail(event) {
 
-      const file:File = event.target.files[0];
+        const file: File = event.target.files[0];
 
-      console.log(file.name);
+        console.log(file.name);
 
-      const filePath = `courses/${this.courseId}/${file.name}`;
+        const filePath = `courses/${this.courseId}/${file.name}`;
 
-      const task = this.storage.upload(filePath, file, {
-          cacheControl: "max-age=2592000,public"
-      })
+        const task = this.storage.upload(filePath, file, {
+            cacheControl: "max-age=2592000,public"
+        });
 
-       this.percentageChanges$ = task.percentageChanges();
+        this.percentageChanges$ = task.percentageChanges();
 
+        task.snapshotChanges()
+            .pipe(
+                last(),
+                concatMap(() => this.storage.ref(filePath).getDownloadURL()),
+                tap(url => this.iconUrl = url),
+                catchError(err => {
+                    console.log(err);
+                    alert("Could not create thumbnail url.");
+                    return throwError(err);
+                })
 
-        task.snapshotChanges().subscribe();
+            )
+            .subscribe();
 
 
     }
 
-  ngOnInit() {
-      this.courseId = this.afs.createId();
-  }
+    ngOnInit() {
+        this.courseId = this.afs.createId();
+    }
 
     onCreateCourse() {
 
         const val = this.form.value;
 
         const newCourse: Partial<Course> = {
-            description:  val.description,
+            description: val.description,
             url: val.url,
             longDescription: val.longDescription,
             promo: val.promo,
             categories: [val.category]
         };
 
-      newCourse.promoStartAt = Timestamp.fromDate(this.form.value.promoStartAt);
-
-      this.coursesService.createCourse(newCourse, this.courseId)
-          .pipe(
-              tap(course => {
-                  console.log("Created new course: ", course);
-                  this.router.navigateByUrl("/courses");
-              }),
-              catchError(err => {
-                  console.log(err);
-                  alert("Could not create the course.");
-                  return throwError(err);
-              })
-          )
-          .subscribe();
-
-
+        newCourse.promoStartAt = Timestamp.fromDate(this.form.value.promoStartAt);
+
+        this.coursesService.createCourse(newCourse, this.courseId)
+            .pipe(
+                tap(course => {
+                    console.log("Created new course: ", course);
+                    this.router.navigateByUrl("/courses");
+                }),
+                catchError(err => {
+                    console.log(err);
+                    alert("Could not create the course.");
+                    return throwError(err);
+                })
+            )
+            .subscribe();
 
 
     }