Add file upload functionality with dialog components and update image handling

jambotron-ui/src/app/components/file-upload.component/file-upload.component.html

@@ -0,0 +1,40 @@
+<div>
+  <mat-form-field>
+    <div>
+      <mat-toolbar>
+        <input matInput [value]="fileName" />
+        <button
+          mat-button
+          color="primary"
+          [disabled]="!currentFile"
+          (click)="upload()"
+        >
+          Upload
+        </button>
+      </mat-toolbar>
+      <input
+        type="file"
+        id="fileInput"
+        (change)="selectFile($event)"
+        name="fileInput"
+      />
+    </div>
+  </mat-form-field>
+</div>
+
+@if (progress) {
+  <mat-toolbar class="progress-bar">
+    <mat-progress-bar color="accent" [value]="progress"></mat-progress-bar>
+    <span class="progress">{{ progress }}%</span>
+  </mat-toolbar>
+}
+
+@if (message) {
+  <div class="message">
+    {{ message }}
+  </div>
+}
+
+@if (fileInfo){
+  <img src="{{fileInfo.url}}" alt=""/>
+}

jambotron-ui/src/app/components/file-upload.component/file-upload.component.scss

@@ -0,0 +1,47 @@
+.progress-bar {
+  padding: 0;
+}
+
+.progress {
+  width: 50px;
+}
+
+#fileInput {
+  position: absolute;
+  cursor: pointer;
+  z-index: 10;
+  opacity: 0;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+
+.mat-toolbar-single-row {
+  height: auto !important;
+  background: transparent;
+  padding: 0;
+}
+
+.mat-toolbar-single-row button {
+  width: 100px;
+}
+
+.mat-form-field {
+  width: 100%;
+}
+
+.mat-mdc-form-field {
+  display: block;
+}
+
+.message {
+  background-color: #ddd;
+  padding: 15px;
+  color: #333;
+  border: #aaa solid 1px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+img{
+  max-width: -webkit-fill-available;
+}

jambotron-ui/src/app/components/file-upload.component/file-upload.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUploadComponent } from './file-upload.component';
+
+describe('FileUploadComponent', () => {
+  let component: FileUploadComponent;
+  let fixture: ComponentFixture<FileUploadComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileUploadComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileUploadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

jambotron-ui/src/app/components/file-upload.component/file-upload.component.ts

@@ -0,0 +1,80 @@
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
+import {MatList, MatListItem} from '@angular/material/list';
+import {AsyncPipe} from '@angular/common';
+import {MatToolbar} from '@angular/material/toolbar';
+import {MatProgressBar} from '@angular/material/progress-bar';
+import {MatFormField, MatInput} from '@angular/material/input';
+import {Observable} from 'rxjs';
+import {HttpEventType, HttpResponse} from '@angular/common/http';
+import {MatButton} from '@angular/material/button';
+import {UserApiService} from '../../modules/user-module/user-api.service';
+import {FileInfo} from '../../models/file-info';
+
+@Component({
+  selector: 'app-file-upload',
+  imports: [
+     MatToolbar,
+    MatProgressBar,
+    MatFormField,
+    MatButton,
+    MatInput
+  ],
+  templateUrl: './file-upload.component.html',
+  styleUrl: './file-upload.component.scss'
+})
+export class FileUploadComponent {
+  currentFile?: File;
+  progress = 0;
+  message = '';
+
+  fileName = 'Select File';
+
+  @Output() fileInfo: FileInfo | undefined;
+  @Output() onImageUploaded = new EventEmitter<FileInfo>();
+  constructor(private userApiService: UserApiService) {}
+
+  selectFile(event: any): void {
+    this.progress = 0;
+    this.message = '';
+
+    if (event.target.files && event.target.files[0]) {
+      const file: File = event.target.files[0];
+      this.currentFile = file;
+      this.fileName = this.currentFile.name;
+    } else {
+      this.fileName = 'Select File';
+    }
+  }
+
+  upload(): void {
+    if (this.currentFile) {
+      this.userApiService.upload(this.currentFile).subscribe({
+        next: (event: any) => {
+          if (event.type === HttpEventType.UploadProgress) {
+            this.progress = Math.round((100 * event.loaded) / event.total);
+          } else if (event instanceof HttpResponse) {
+            this.message = event.body.message;
+            this.fileInfo =event.body.fileInfo;
+            this.onImageUploaded.emit(this.fileInfo);
+            console.log(event.body);
+          }
+        },
+        error: (err: any) => {
+          console.log(err);
+          this.progress = 0;
+
+          if (err.error && err.error.message) {
+            this.message = err.error.message;
+          } else {
+            this.message = 'Could not upload the file!';
+            this.onImageUploaded.emit(undefined);
+          }
+        },
+        complete: () => {
+          this.currentFile = undefined;
+        },
+      });
+    }
+  }
+}