1 year ago

#71231

test-img

Siva Sai

How to convert blob into base64 in nextJs

I am getting the Image from an API response. I am trying to the get the image and display in the UI.

import FileReader from  'filereader';

export default async (req, res) => {
const { method } = req;
switch (method) {
case 'GET':
    try {
        const response = await fetch("imagepathurl", Constants.config);
        const imageBlob = await response.blob()
        console.log("imageBlob", imageBlob)
        return new Promise((resolve, _) => {
            const reader = new FileReader();
            reader.onloadend = () => resolve(reader.result);
            reader.readAsDataURL(imageBlob);
        });
     } catch (error) {
        console.log("error", error);
    }
    break

default:
  res.setHeader('Allow', ['GET', 'PUT', 'PATCH'])
  res.status(405).end(`Method ${method} Not Allowed`)
}
}

I can able to capture imageBlob but from the fileReader() i am unable to capture and convert to base64. In File Reader i am facing Error: cannot read as File: {}.

Please let me know the way i am doing is correct or can soneone guide me in fixing it.

reactjs

next.js

blob

filereader

nextjs-image

0 Answers

Your Answer

Accepted video resources