Add fileName property to models and update related components for file handling

jambotron-ui/src/app/modules/user-module/user-api.service.ts

@@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';
-import {forkJoin, Observable} from 'rxjs';
+import {forkJoin, Observable, switchMap} from 'rxjs';
 import {Tutorial} from '../../models/tutorial.model';
 import {HttpClient, HttpEvent, HttpHeaders, HttpRequest} from '@angular/common/http';
 import {GlobalConstants} from '../../global-constants';
 import {FileInfo} from '../../models/file-info';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -15,6 +16,11 @@ export class UserApiService {
 
   }
 
+  uploadUserBase64Image(base64Image: Base64ImagePayload): Observable<any> {
+    return this.http.post<UploadImageResponse>(`${this.baseUrl}/user-images/upload-base64-image`, base64Image, { headers: { "Content-Type": "application/json" } }
+    );
+  }
+
   upload(file: File): Observable<HttpEvent<any>> {
     const formData: FormData = new FormData();
     formData.append('file', file);
@@ -36,32 +42,59 @@ export class UserApiService {
     return this.http.get<FileInfo[]>(`${this.baseUrl}/getImages`);
   }
 
+
+  loadImageAsBase64(imageUrl: string): Observable<string> {
+    return this.http.post<Base64ImageResponse>(`${this.baseUrl}/user-images/base64-image`, imageUrl)
+      .pipe(map(r => `data:${r.mime};base64,${(r.data || '').trim()}`));
+  }
+
   getUserAllTutorials(): Observable<Tutorial[]> {
     return this.http.get<Tutorial[]>(`${this.baseUrl}/tutorials`);
   }
 
-  getTutorial(id: string | null | undefined): Observable<Tutorial> {
-    return this.http.get<Tutorial>(`${this.baseUrl}/tutorial-get/${id}`);
+  getTutorial(fileName: string | null | undefined): Observable<Tutorial> {
+    return this.http.get<Tutorial>(`${this.baseUrl}/tutorial-get/${fileName}`);
   }
 
   create(data: any): Observable<any> {
     return this.http.post(`${this.baseUrl}/tutorial-add`, data);
   }
 
-  update(id: any,data: any): Observable<any> {
-    return this.http.put(`${this.baseUrl}/tutorial-update/${id}`, data);
+  update(fileName: any,data: any): Observable<any> {
+    return this.http.put(`${this.baseUrl}/tutorial-update/${fileName}`, data);
   }
 
   deleteTutorials(tutorials: Tutorial[]): Observable<Tutorial[]> {
     return forkJoin(
       tutorials.map((tutorial) =>
-        this.http.delete<Tutorial>(`${this.baseUrl}/tutorials/${tutorial.id}`)
+        this.http.delete<Tutorial>(`${this.baseUrl}/tutorials/${tutorial.fileName}`)
       )
     );
   }
 
-  deleteTutorial(id: number): Observable<Tutorial> {
-      return this.http.delete<Tutorial>(`${this.baseUrl}/tutorials/${id}`);
+  deleteTutorial(fileName: number): Observable<Tutorial> {
+      return this.http.delete<Tutorial>(`${this.baseUrl}/tutorials/${fileName}`);
   }
 
 }
+
+export interface Base64ImagePayload {
+  mime: string;           // e.g., "image/png"
+  data: string;           // base64 string (no "data:" prefix)
+}
+
+export interface UploadImageResponse {
+  message: string;
+  fileName: string;
+  url: string;            // URL to access the stored image
+  mime: string;
+  size: number;           // bytes
+}
+
+
+export interface Base64ImageResponse {
+  message: string;
+  mime: string;
+  data: string; // Base64 without "data:" prefix
+}
+