Estoy trabajando un servicio de Angular el cual me ayuda a controlar errores y/o mostrar una imagen en base64. Todo va bien, pero me confundo en los return
. Como puedo salir de la función general cuando encuentro un error, y regresar un objeto que tiene dos índices, el error y la base64
Este es mi archivo
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ToolsService {
constructor() {}
viewImg(file: Blob, maxSize: number, maxHeight ?: number, maxWidth ?: number): any {
const ret = {
error: null,
base: null
};
const fileType = /image.*/;
if (!file.type.match(fileType)) {
ret.error = 'El archivo no es una imagen valida';
return ret;
}
if (Math.ceil(file.size / 1024) > maxSize) {
ret.error = `El archivo pesa ${ Math.ceil( file.size / 1024 ) }Kb, sólo ${ ( maxSize ) }Kb permitidos`;
return ret;
}
const reader = new FileReader();
reader.onload = () => {
const res: any = reader.result;
const img = new Image();
ret.base = res;
img.src = res;
console.log( 'CARGANDO IMG' );
img.onload = () => {
console.log( 'CONVIRTIENDO IMG' );
if (img.width > maxWidth || img.height > maxHeight) {
ret.error = `Archivo sobredimensionado, ${ img.width } x ${ img.height }px. Permitido ${ maxWidth } x ${ maxHeight }px`;
return ret;
}
ret.base = res;
};
};
reader.readAsDataURL(file);
return ret;
}
}
Así lo invoco
preview( ev: any ) {
if( ev.target.files[0] ) {
const base64 = this._tools.viewImg( ev.target.files[0], 250, 100, 100 );
console.log( base64 );
}
}
Y el resultado en consola tiene este orden
new.component.ts:22 {error: null, base: null}
tools.service.ts:36 CARGANDO IMG
tools.service.ts:39 CONVIRTIENDO IMG
Es decir, está regresando el resultado y luego lo está procesando. He pensado en utilizar una promesa, pero sinceramente no tengo mucha experiencia haciendolas.
¿Qué puedo hacer?