1

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.

6
  • create a state for image blob and another for the image URL then use setImageUrl(URL.createObjectURL(imgBlob)) Commented Jan 19, 2022 at 17:59
  • What i setImageURL and URL in your case Commented Jan 19, 2022 at 18:15
  • const [imageURL, setImageUrl] = React.useState('') Commented Jan 19, 2022 at 18:43
  • There is no need of setImageUrl always the url is same. From the API Url i am getting an image in the response need to capture that image and convert to base64. From response, blob i am getting . From blob how to convert to base64 Commented Jan 20, 2022 at 5:11
  • Does this answer your question: Blob to Base64 in NodeJS without FileReader? Your code runs on the server, but FileReader is a Web API only available in the browser. Commented Jan 21, 2022 at 13:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.