Allow uploading images

src/app/recipe-add/recipe-add.component.ts

@@ -3,17 +3,21 @@ import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angu
 import { Router } from '@angular/router';
 import { Ingredient, IngredientEntry, Recipe } from '../../cookbook/type';
 import { RecipeService } from '../recipe.service';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButton } from '@angular/material/button';
 
 @Component({
   selector: 'app-recipe-add',
   standalone: true,
-  imports: [ReactiveFormsModule, FormsModule],
+  imports: [ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatButton, MatFormFieldModule],
   templateUrl: './recipe-add.component.html',
 })
 export class RecipeAddComponent {
   createForm = this.formBuilder.group({
     name: ['', Validators.maxLength(256)],
     description: ['', Validators.maxLength(512)],
+    image: '',
     selectedIngredient: '',
   });
 
@@ -23,9 +27,11 @@ export class RecipeAddComponent {
     name: 'Paprika',
   }];
 
+  selectedFilename: string = '';
+
   #recipeId: number = -1;
   @Input()
-  set recipeId(recipeId: string) {
+  set id(recipeId: string) {
     if (recipeId === undefined) return;
     this.#recipeId = parseInt(recipeId);
     const recipe = this.recipes.get(this.#recipeId);
@@ -38,6 +44,9 @@ export class RecipeAddComponent {
       description: recipe.description,
     });
   }
+  get recipeId() {
+    return this.#recipeId;
+  }
 
   constructor(private formBuilder: FormBuilder, private recipes: RecipeService, private router: Router) {}
 
@@ -49,7 +58,7 @@ export class RecipeAddComponent {
     const partial: Omit<Recipe, 'id'> = {
       name: value.name!,
       description: value.description!,
-      image: '',
+      image: value.image ?? '',
       ingredients: this.ingredientEntries,
     };
     if (this.#recipeId === -1) {
@@ -75,4 +84,18 @@ export class RecipeAddComponent {
       quantity: 1,
     });
   }
+
+  onFileSelected(event: Event): void {
+    const file = (event.target as HTMLInputElement).files![0];
+    if (file) {
+      this.selectedFilename = file.name;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.createForm.patchValue({
+          image: event.target!.result?.toString()
+        });
+      }
+      reader.readAsDataURL(file);
+    }
+  }
 }