79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
/** Angular Imports */
|
|
import { Component, inject } from '@angular/core';
|
|
import { MatDialogRef, MatDialogTitle, MatDialogActions, MatDialogClose } from '@angular/material/dialog';
|
|
import { FileUploadComponent } from '../../../../shared/file-upload/file-upload.component';
|
|
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
|
|
|
/**
|
|
* Upload image dialog component.
|
|
*/
|
|
@Component({
|
|
selector: 'mifosx-upload-image-dialog',
|
|
templateUrl: './upload-image-dialog.component.html',
|
|
styleUrls: ['./upload-image-dialog.component.scss'],
|
|
imports: [
|
|
...STANDALONE_SHARED_IMPORTS,
|
|
MatDialogTitle,
|
|
FileUploadComponent,
|
|
MatDialogActions,
|
|
MatDialogClose
|
|
]
|
|
})
|
|
export class UploadImageDialogComponent {
|
|
dialogRef = inject<MatDialogRef<UploadImageDialogComponent>>(MatDialogRef);
|
|
|
|
/** Client Image */
|
|
image: File;
|
|
|
|
/**
|
|
* Data URL of the selected image, rendered as a preview so the officer sees what they picked
|
|
* before confirming — the upload replaces the client's profile picture immediately on confirm,
|
|
* and picking the wrong file is otherwise only discovered once it is already live.
|
|
*/
|
|
imagePreview: string | null = null;
|
|
|
|
/** Set when the picked file is not a readable image, in place of a preview. */
|
|
previewError = '';
|
|
|
|
/**
|
|
* Sets file form control value.
|
|
* @param {any} $event file change event.
|
|
*/
|
|
onFileSelect($event: any) {
|
|
if ($event.target.files.length > 0) {
|
|
this.image = $event.target.files[0];
|
|
this.buildPreview(this.image);
|
|
}
|
|
}
|
|
|
|
/** Reads the picked file into a data URL for the preview. */
|
|
private buildPreview(file: File) {
|
|
this.imagePreview = null;
|
|
this.previewError = '';
|
|
|
|
// The picker's accept filter is a hint the OS dialog can be talked out of, so re-check here
|
|
// rather than handing a non-image to FileReader and rendering a broken <img>.
|
|
if (!file.type?.startsWith('image/')) {
|
|
this.previewError = 'Selected file is not an image. Choose a PNG or JPEG file.';
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
this.imagePreview = reader.result as string;
|
|
};
|
|
reader.onerror = () => {
|
|
this.previewError = 'Could not read the selected file.';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|