Fix bugs in game upload

frontend/indiestream/src/app/components/game-upload/game-upload.component.ts

@@ -3,11 +3,11 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatProgressBar } from "@angular/material/progress-bar";
 import { MatIcon } from "@angular/material/icon";
 import { HttpClientModule, HttpEventType } from "@angular/common/http";
-import {finalize, Subscription} from "rxjs";
-import {NgIf} from "@angular/common";
-import {GamesService} from "../../services/games.service";
-import {MatFormField, MatHint, MatInput, MatLabel, MatSuffix} from "@angular/material/input";
-import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+import { catchError, EMPTY, finalize, Subscription } from "rxjs";
+import { NgIf } from "@angular/common";
+import { GamesService } from "../../services/games.service";
+import { MatFormField, MatHint, MatInput, MatLabel, MatSuffix } from "@angular/material/input";
+import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";
 
 @Component({
   selector: 'app-game-upload',
@@ -32,40 +32,45 @@ export class GameUploadComponent {
 
   uploadProgress: number = 0;
   uploadSub: Subscription = new Subscription();
-  file_store: FileList = new DataTransfer().files;
   gameForm = this.fb.group({
     title: ['', Validators.required],
-    filename: ['', Validators.required]
+    filename: ['', Validators.required],
+    file: [new DataTransfer().files, Validators.required]
   });
 
   constructor(private gamesService: GamesService, private fb: FormBuilder) {}
 
   onFileSelected(event: any) {
     const file:File = event.target.files[0];
     if (file) {
-      this.file_store = event.target.files;
       this.gameForm.patchValue({ filename: file.name});
+      this.gameForm.patchValue({ file: event.target.files});
     }
   }
 
   onUpload() {
-    const upload$ = this.gamesService.uploadGame(this.file_store[0])
-      .pipe(
-        finalize(() => this.reset())
-      );
+    if (this.gameForm.valid) {
+      const upload$ = this.gamesService.uploadGame(this.gameForm)
+        .pipe(
+          catchError((error) => {
+            console.error('An error occured during upload', error);
+            return EMPTY;
+          }),
+          finalize(() => this.reset())
+        );
 
-    this.uploadSub = upload$.subscribe(event => {
-      if (event.type == HttpEventType.UploadProgress && event.total !== undefined) {
-        this.uploadProgress = Math.round(100 * (event.loaded / event.total));
-      }
-    })
+      this.uploadSub = upload$.subscribe(event => {
+        if (event.type == HttpEventType.UploadProgress && event.total !== undefined) {
+          this.uploadProgress = Math.round(100 * (event.loaded / event.total));
+        }
+      })
+    }
   }
 
   reset() {
     this.uploadProgress = 0;
     this.uploadSub.unsubscribe();
     this.uploadSub = new Subscription();
     this.gameForm.reset();
-    this.file_store = new DataTransfer().files;
   }
 }

frontend/indiestream/src/app/services/games.service.ts

@@ -4,6 +4,7 @@ import { Games, Game } from '../modules/games';
 import { Observable } from "rxjs";
 import { AppConfigService } from "./app-config.service";
 import { AuthService} from "./auth.service";
+import {FormGroup} from "@angular/forms";
 
 @Injectable({
   providedIn: 'root'
@@ -27,12 +28,18 @@ export class GamesService {
     return this.http.get<Game>(this.apiUrl + "/games/" + id)
   }
 
-  deleteGame(id: string): void{
+  deleteGame(id: string): void {
     this.http.delete(this.apiUrl + "/games/" + id)
   }
 
-  uploadGame(file: File): Observable<HttpEvent<Object>>{
-    return this.http.post(this.apiUrl + "/games", file, {
+  uploadGame(gameForm: FormGroup): Observable<HttpEvent<Object>> {
+    const formData = new FormData();
+    formData.append('title', gameForm.get('title')?.value);
+    const files: FileList = gameForm.get('file')?.value;
+    if (files && files.length > 0) {
+      formData.append('file', files[0]);
+    }
+    return this.http.post(this.apiUrl + "/games", formData, {
       reportProgress: true,
       observe: 'events'
     });