In my application I'm downloading previously stored images and pdf documents from amazon s3:
public async downloadFile(file: string): Promise<DownloadedFileType> {
const data = await this.#s3.send(
new GetObjectCommand({
Bucket: process.env.AWS_BUCKET_NAME,
Key: file,
}),
);
return { stream: data.Body, name: file };
}
Problem happens when I try to convert obtained stream in to base64 image (to send it as a "preview" to my front end):
private getBase64FromStream(
stream: Readable,
fileType: string,
): Promise<string> {
return new Promise((resolve, reject) => {
const data: Uint8Array[] = [];
function onData(chunk: Uint8Array): void {
data.push(chunk);
}
stream.on('data', onData);
stream.once('end', () => {
const result = Buffer.concat(data).toString('base64');
const mimeType =
fileType === 'pdf' ? 'application/pdf' : `image/${fileType}`;
resolve(`data:${mimeType}; base64, ${result}`);
stream.off('data', onData);
});
stream.once('error', reject);
});
}
It works fine for images (jpeg, png, etc.), but doesn't work for pdf documents. Rendering such base64 on my frontend results in error:
export function PreviewComponent({
src,
}: IProps): JSX.Element {
const classes = useStyles();
const { dispatch } = useContext(AppContext);
const onImageClick = () => {
dispatch(openImageModalAction(src));
};
const onError = (e: unknown) => {
console.log(e);
};
return (
<img
className={classes.imageWrapper}
src={src}
alt="preview"
onClick={onImageClick}
onError={onError}
/>
);
}
With error being React's SyntheticBaseEvent:
type: "error"
_reactName: "onError"
I have no clue what I'm doing wrong. I know you can convert pdf files to base64. Any help will be greatly appreciated.
