import React,{useState,useEffect} from 'react'; function App() { const [image,setImage]= useState<File|null>(); const [preview,setPreview] = useState<string|null>(); useEffect(()=>{ if(image){ const reader = new FileReader(); reader.onloadend=()=>{ setPreview(reader.result as string); console.log(reader.result); } reader.readAsDataURL(image); }else{ setPreview(null); } },[image]) return ( <div className="App"> <p>plm in grt{preview}</p> <input type="file" onChange={ (event:any|null)=>{ const file:File|null = event?.target.files[0]; if(file && file.type.substr(0,5)==="image"){ setImage(file); }else{ setImage(null); } } }/> </div> ); } export default App;

La cadena base64 de la imagen se almacena en el estado de "vista previa". Cuando subo una imagen muy pequeña (500 kb), se muestra la vista previa dentro de la etiqueta p. En el caso de que subo una imagen de 5 mb, la página se transforma en blanco y no pasa nada. Cual seria el problema. Si espero un minuto, el botón de entrada se procesa, pero no aparece ninguna cadena en la pantalla. ¿Cuál sería la causa, supongo, la etiqueta se muestra antes de que la vista previa almacene toda la cadena base64?