Tengo este controlador de imagenes que me retorna un objeto con un error y/o una cadena en base64 de una foto que he subido
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ImageHandlerService {
constructor() { }
handler( file: any, inSize?: number, inWidth?: number, inHeight?: number ): any {
const obj: any = { file: null, error: null };
if ( !file ) {
obj['file'] = null;
obj['error'] = 'No se recibió la imagen';
return obj;
}
const imageType = /image.*/;
if ( !file.type.match( imageType) ) {
obj['file'] = null;
obj['error'] = 'El archivo recibido no es una imagen';
return obj;
}
if ( inSize ) {
const KBIn = Math.ceil( inSize );
const KBFile = Math.ceil( file.size / 1024 );
console.log( KBFile, KBIn );
if ( KBIn < KBFile ) {
obj['file'] = null;
obj['error'] = `Peso de fichero excedido. Permitido ${ KBIn }KB, enviado ${ KBFile }KB.`;
return obj;
}
}
const reader: any = new FileReader();
const img: any = new Image();
reader.readAsDataURL( file );
const imgPromise = new Promise( (resolve: any) => {
img.onload = () => {
resolve( { width: img.width, height: img.height } );
};
});
const onloadPromise = new Promise( (resolve: any) => {
reader.onload = () => {
if ( inHeight && inWidth ) {
img.src = reader.result;
imgPromise.then( (res: any) => {
if ( res.width > inWidth || res.height > inHeight ) {
const ret = {
file: null,
error: `Archivo sobredimensionado. Actual: ${ res.width }x${res.height}. Permitido: ${inWidth}x${inHeight}`
};
resolve( ret );
} else {
resolve({file: reader.result, error: null});
}
});
} else {
resolve({file: reader.result, error: null});
}
};
});
onloadPromise.then( (res: any) => {
obj['file'] = res.file;
obj['error'] = res.error;
});
return obj;
}
}
El controlador funciona perfecto, hace lo que tiene que hacer, y regresa a la función con la que se invocó
changePhoto( photo: any ) {
const uploaded = this.ihandler.handler( photo.files[0] );
console.log( uploaded );
}
No hay problemas en la parte de la inyección del ihandler
en el constructor, digo, todo lo hace muy bien, pero cuando veo en consola la respuesta aparece { file:null, error:null }
pero si despliego el objeto, viene con la información.
Si hago console.log( uploaded.file, uploaded.error )
sale undefined undefined
Como si no estuviera trayendo nada, pero en realidad si se procesó.
Es un issue del navegador? Que estoy haciendo mal?