Estoy trabajando con FileReader y me encontré con un problema con el método onLoad de FileReader que no se ejecuta sincrónicamente con el resto del código. Básicamente tengo 2 funciones como estas:
imageExists(url, callback) { var img = new Image(); img.onload = function () { callback(true); }; img.onerror = function () { callback(false); }; img.src = url; } isImageCorrupt(file): boolean { var reader = new FileReader(); var isCorrupt = false; reader.readAsDataURL(file); reader.onload = (e) => { this.imageExists(e.target.result, (exists) => { if (exists) { isCorrupt = false; // Image is not corrupt } else { isCorrupt = true; //Image is corrupt } }); }; return isCorrupt; }La función isImageCorrupt() llama a reader.onLoad, que llama a la función de devolución de llamada imageExists, que también contiene un método de carga de imágenes.
El problema es que durante la ejecución de la función isImageCorrupt(), el archivo reader.onLoad aún no ha cambiado el valor de isCorrupt, pero la función ha devuelto el valor en la última línea, que siempre es falso.
Quiero que mi función espere a que reader.onLoad termine su ejecución antes de que la función devuelva el valor.
tal vez algo como esto?
isImageCorrupt(file): Promise<Boolean> { return new Promise((resolve) => { var reader = new FileReader(); reader.onload = (e) => { var img = new Image(); img.onload = function () { resolve(false); }; img.onerror = function () { resolve(true); }; img.src = <string>e.target.result; } reader.readAsDataURL(file); }); }*descargo de responsabilidad: no lo probé
Podrías usar Promesas. El código aún podría refactorizarse usando async/await
isImageCorrupt(file): Promise<boolean> { return new Promise<boolean>((resolve,reject)=>{ var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = ()=>{ var img = new Image(); img.src = reader.result; img.onload = function () { resolve(false); }; img.onerror = function () { resolve(true); }; } reader.onerror=()=>{reject(true)} }); }; isImageCorrupt(yourFile).then((result)=>{/*HERE USE RESULT*/},(error)=>{HERE USE ERROR RESULT})Sin embargo, no debe devolver verdadero o falso, sino resolver si está bien y rechazar en caso contrario, sin un valor booleano de esta manera
isImageCorrupt(file): Promise<void> { return new Promise<void>((resolve,reject)=>{ var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = ()=>{ var img = new Image(); img.src = reader.result; img.onload = function () { resolve(); }; img.onerror = function () { reject(); }; } reader.onerror=()=>{reject()} }); }; isImageCorrupt(yourFile).then(()=>{/*HERE OK*/},()=> {HERE THERE WAS SOME ERROR/PROBLEM})