67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import { Component, ElementRef, Input, output, ViewChild } from '@angular/core';
|
|
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
|
|
import { UploadParams } from '../../../../../bizmatch-server/src/models/main.model';
|
|
import { ImageService } from '../../services/image.service';
|
|
import { ListingsService } from '../../services/listings.service';
|
|
import { SharedModule } from '../../shared/shared/shared.module';
|
|
export interface UploadReponse {
|
|
success: boolean;
|
|
type: 'uploadPropertyPicture' | 'uploadCompanyLogo' | 'uploadProfile';
|
|
}
|
|
@Component({
|
|
selector: 'app-image-crop-and-upload',
|
|
standalone: true,
|
|
imports: [SharedModule, ImageCropperComponent],
|
|
templateUrl: './image-crop-and-upload.component.html',
|
|
styleUrl: './image-crop-and-upload.component.scss',
|
|
})
|
|
export class ImageCropAndUploadComponent {
|
|
showModal = false;
|
|
imageChangedEvent: any = '';
|
|
croppedImage: Blob | null = null;
|
|
@Input() uploadParams: UploadParams;
|
|
uploadFinished = output<UploadReponse>();
|
|
@ViewChild('fileInput', { static: true }) fileInput!: ElementRef<HTMLInputElement>;
|
|
|
|
constructor(private imageService: ImageService, private listingsService: ListingsService) {}
|
|
|
|
ngOnInit() {}
|
|
ngOnChanges() {
|
|
this.openFileDialog();
|
|
}
|
|
openFileDialog() {
|
|
if (this.uploadParams) {
|
|
this.fileInput.nativeElement.click();
|
|
}
|
|
}
|
|
|
|
fileChangeEvent(event: any): void {
|
|
this.imageChangedEvent = event;
|
|
this.showModal = true;
|
|
}
|
|
|
|
imageCropped(event: ImageCroppedEvent) {
|
|
this.croppedImage = event.blob;
|
|
}
|
|
|
|
closeModal() {
|
|
this.imageChangedEvent = null;
|
|
this.croppedImage = null;
|
|
this.showModal = false;
|
|
this.fileInput.nativeElement.value = '';
|
|
this.uploadFinished.emit({ success: false, type: this.uploadParams.type });
|
|
}
|
|
|
|
async uploadImage() {
|
|
if (this.croppedImage) {
|
|
await this.imageService.uploadImage(this.croppedImage, this.uploadParams.type, this.uploadParams.imagePath, this.uploadParams.serialId);
|
|
this.closeModal();
|
|
this.uploadFinished.emit({ success: true, type: this.uploadParams.type });
|
|
}
|
|
}
|
|
|
|
loadImageFailed() {
|
|
console.error('Load image failed');
|
|
}
|
|
}
|