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

2025-08-09 22:22:02 +03:00
parent ca73cf31df
commit d45fd83593
64 changed files with 1644 additions and 433 deletions
@@ -0,0 +1,19 @@
+<p>dialog-cropp-image.component works!</p>
+<mat-dialog-content class="mat-typography">
+  <image-cropper
+
+    [imageURL]="image"
+    style="width: 400px; height: 300px;"
+    [imageChangedEvent]="imageChangedEvent"
+    [maintainAspectRatio]="true"
+    [aspectRatio]="4 / 3"
+    format="png"
+    (imageCropped)="imageCropped($event)"
+    (imageLoaded)="imageLoaded($event)"
+    (cropperReady)="cropperReady()"
+    (loadImageFailed)="loadImageFailed()"
+  ></image-cropper>
+
+  <img style="width: 358px; height: 200px" [src]="croppedImage" />
+
+</mat-dialog-content>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogCroppImageComponent } from './dialog-cropp-image.component';
+
+describe('DialogCroppImageComponent', () => {
+  let component: DialogCroppImageComponent;
+  let fixture: ComponentFixture<DialogCroppImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogCroppImageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogCroppImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,62 @@
+import {Component, inject, input} from '@angular/core';
+import {ImageCroppedEvent, ImageCropperComponent, LoadedImage} from 'ngx-image-cropper';
+import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
+import {UserApiService} from '../user-api.service';
+import {MAT_DIALOG_DATA, MatDialogContent} from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-dialog-cropp-image.component',
+  imports: [
+    ImageCropperComponent,
+    MatDialogContent
+  ],
+  templateUrl: './dialog-cropp-image.component.html',
+  styleUrl: './dialog-cropp-image.component.scss'
+})
+export class DialogCroppImageComponent {
+
+  imageChangedEvent: Event | null = null;
+  croppedImage: SafeUrl  = '';
+
+  image?: string;
+  imageCropUrl: string | undefined;
+
+  constructor(
+    private userApiService: UserApiService,
+    private sanitizer: DomSanitizer,
+
+  ) {
+    this.cropImage(this.imageCropUrl);
+  }
+
+  ///------------
+
+  fileChangeEvent(event: Event): void {
+    this.imageChangedEvent = event;
+  }
+  imageCropped(event: ImageCroppedEvent) {
+    if (event.objectUrl != null) {
+      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
+    }
+    // event.blob can be used to upload the cropped image
+  }
+  imageLoaded(image: LoadedImage) {
+    // show cropper
+  }
+  cropperReady() {
+    // cropper ready
+  }
+  loadImageFailed() {
+    // show message
+  }
+
+  cropImage(url: string | undefined) {
+    if(url !== undefined){
+      this.userApiService.loadImageAsBase64(url).subscribe(data => {
+        this.image = data;
+      })
+    }
+  }
+
+
+}