Angular Forms In Depth

Author: Your Name

src/app/file-upload/file-upload.component.ts

@@ -17,6 +17,12 @@ export class FileUploadComponent {
 
     fileName = '';
 
+    fileUploadError = false;
+
+    constructor(private http: HttpClient) {
+
+    }
+
     onFileSelected(event) {
 
         const file:File = event.target.files[0];
@@ -25,10 +31,37 @@ export class FileUploadComponent {
 
             this.fileName = file.name;
 
-            console.log(this.fileName);
+            const formData = new FormData();
+
+            formData.append("thumbnail", file);
+
+            this.fileUploadError = false;
+
+            this.http.post("/api/thumbnail-upload", formData)
+                .pipe(
+                    catchError(error => {
+                        this.fileUploadError = true;
+                        return of(error);
+                    })
+                )
+                .subscribe();
+
+
 
         }
 
     }
 
 }
+
+
+
+
+
+
+
+
+
+
+
+