Allow uploading images

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

@@ -1,11 +1,17 @@
 <form [formGroup]="createForm" (ngSubmit)="onSubmit()">
-    <div>
+    <mat-form-field>
         <label for="name">Nom</label>
-        <input id="name" type="text" formControlName="name" required>
-    </div>
-    <div>
+        <input matInput id="name" type="text" formControlName="name" required>
+    </mat-form-field>
+    <mat-form-field>
         <label for="description">Description</label>
-        <textarea id="description" type="text" formControlName="description" required></textarea>
+        <textarea matInput id="description" type="text" formControlName="description" required></textarea>
+    </mat-form-field>
+    <div>
+        <label for="image">Image</label>
+        <button type="button" mat-raised-button (click)="fileInput.click()">Téléverser</button>
+        <input hidden (change)="onFileSelected($event)" #fileInput type="file">
+        <span class="file-name">{{ selectedFilename }}</span>
     </div>
     <div>
         <label for="description">Ingrédients</label>
@@ -19,7 +25,7 @@
                 <option [ngValue]="ingredient.id">{{ ingredient.name }}</option>
             }
         </select>
-        <button type="button" (click)="onAddIngredient()">Add</button>
+        <button mat-button type="button" (click)="onAddIngredient()">Add</button>
     </div>
-    <button class="button" type="submit">Ajouter</button>
+    <button mat-flat-button class="button" type="submit">{{ recipeId === -1 ? 'Ajouter' : 'Éditer' }}</button>
 </form>

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);
+    }
+  }
 }

src/app/recipes/recipes.component.html

@@ -26,7 +26,7 @@
       <ng-container matColumnDef="image">
         <th mat-header-cell *matHeaderCellDef> image </th>
         <td mat-cell *matCellDef="let element">
-          <img src="https://placehold.co/200x200">
+          <img [src]="element.image || 'https://placehold.co/200x200'" [alt]="element.image ? element.name : ''" width="200" height="200">
         </td>
       </ng-container>