'Cannot preview pdf-files larger than 2mb in chrome using FileReader

I want to preview PDF with FileReader before uploading the document to the database. There is no problem when I use Firefox, but if I use Chrome, files larger than 2MB doesn't display inside the iframe tag. Here is the code.

useEffect(() => {


if(fileName) {

   const reader = new FileReader();
   reader.onloadend = () => {
     // console.log(reader.result);    
       setDocumentPreview(reader.result);
   }
   reader.readAsDataURL(fileName); 
   
} 
else {
   setDocumentPreview(null);
   
}
}, [fileName]);

After check, I put fileName inside state variable and try to display with iframe.

    <div className={classes.pdfBox}>
        <iframe src={documentPreview} title={file} className={classes.pdfBox} />
    </div> 

Thank you in advance for your help.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source